我可以制作CSS:在伪元素之后追加元素之外的内容吗？

Question

我想使用»相邻链接之间的HTML 实体格式化链接的痕迹痕迹,所以它看起来像这样:

主页 » 关于我们 » 历史 »本页

我在CSS中添加了一条规则:

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

但这是在链接中添加实体,而不是在外面 - 即我得到这个:

主页» 关于我们» 历史»本页

我误解了CSS :after伪元素的行为吗？文档似乎意味着它在指定元素之后添加指定的内容,而不是将其添加到元素容器的内部.有任何想法吗？

Answer 1

该规范说:

正如其名称所示,:before和:after伪元素指定元素文档树内容之前和之后的内容位置.

注意这句话末尾的关键短语,它指的是内部内容(或内部文本).所以,伪元件被插入到端的开头内指定的元素含量.因此,在超链接的文本之后插入正确的双角度引用,而不是在超链接之后插入.

这是一个带有两个伪元素的链接的DOM元素树的直观表示:

a
  a:before
  content
  a:after

我想这个行为的一个解决方法是将每个链接包装在一个span然后应用样式中nav#breadcrumb-trail span:after,但这会导致不必要的标记......但是在任何方面都值得一试.

Answer 2

通常你将这些菜单编码为有序列表,所以有意义的做这样的事情:

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