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

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

home & raquo; о нас & raquo; история & raquo; этой страницы

Я добавил правило к моему CSS:

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

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

home & raquo; о нас & raquo; история & raquo; на этой странице

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

Ответы

Ответ 1

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

#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>

Ответ 2

spec говорит:

Как показывают их имена, псевдовые элементы: before и: after определяют местоположение содержимого до и после содержимого дерева элементов документа.

Обратите внимание на ключевую фразу в конце этого предложения, которая ссылается на внутренний контент (или внутренний текст). Таким образом, псевдоэлементы вставляются в начало конца в пределах указанных элементов content. Поэтому правая двойная угловая цитата вставляется после текста ваших гиперссылок, а не после гиперссылок.

Здесь представлено визуальное представление дерева элемента DOM для одной такой ссылки с обоими псевдоэлементами:

a
  a:before
  content
  a:after

Я предполагаю, что обходной способ этого поведения состоит в том, чтобы обернуть каждую ссылку в span, а затем применить стили к nav#breadcrumb-trail span:after, но это приведет к ненужной разметке... в любом случае стоит сделать что-то в этом роде.

Ответ 3

Учитывая гибкость и 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>