Можно ли сделать CSS: после того, как псевдоэлемент добавляет контент вне элемента? - PullRequest
Новая
       1

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

37 голосов
/ 19 марта 2011

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

home" о нас " история"эта страница

Я добавил правило в свой CSS: 

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

но это добавляет сущность ВНУТРИ ссылки, а не снаружи - т.е. я получаю это:

home " о нас" history " эта страница

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

Ответы [ 3 ]

33 голосов
/ 19 марта 2011

spec говорит:

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

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

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

a
  a:before
  content
  a:after

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

31 голосов
/ 19 марта 2011

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

#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>
3 голосов
/ 23 апреля 2015

Учитывая гибкость и потрясающий 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: Абсолютно позиционированные `элементы включены в размеры блоков, поэтому плавающие или выровненные рядом элементы не могут динамически учитывать ширину содержимого псевдоэлементов.

...