html - псевдоэлементы - анимация псевдоэлементов




Могу ли я сделать CSS: после псевдоэлемента добавить контент вне элемента? (2)

Я хочу отформатировать цепочку ссылок с помощью HTML » объект между соседними ссылками, поэтому он выглядит так:

home » home » home »на этой странице

Я добавил правило для моего CSS:

nav#breadcrumb-trail a:after {
    content: " » ";
}

но это добавляет сущность INSIDE к ссылке, а не за ее пределами - т.е. я получаю это:

home home home этой странице

Я неправильно понимаю поведение CSS :after псевдоэлемента? Документация, похоже, подразумевает, что добавляет указанный контент после указанного элемента, а не добавляет его внутрь контейнера элемента. Есть идеи?


Обычно вы кодируете эти меню как упорядоченные списки, так что имеет смысл делать что-то вроде этого:

#breadcrumb-trail ol { 
    list-style: none; 
    margin: 0;
    padding: 0; 
}

#breadcrumb-trail li { 
    display: inline; 
}

#breadcrumb-trail li:after { 
    content: ' » '; 
}

#breadcrumb-trail li:last-child:after { 
    content: none; 
}
<nav id="breadcrumb-trail">
    <h1>My Amazing Breadcrumb Menu</h1>
    <ol>
        <li><a href="">about</a></li>
        <li><a href="">fos</a></li>
    </ol>
</nav>


Учитывая гибкость и awesomeness CSS, он выглядит довольно увлекательным. Пробовал это в текущем Chrome, FF и IE, и он выполняет эту работу так, как ожидалось, без необходимости добавления дополнительной надстройки:

#box {
  width: 100px;
  height: 100px;
  background: #eee;
  position: relative;
}

#box:after {
  content: '...appended text outside box';
  position: absolute;
  margin-left: 100%;
  left: 0;
  width: 200px;
}
<div id="box">
  Some Box
</div>

Small Caveat: Абсолютно позиционированные элементы включены в размеры ящиков, поэтому элементы, плавающие или расположенные рядом с ним, не могут динамически оценивать ширину содержимого псевдоэлементов.







pseudo-element