我可以做的CSS：伪元素追加元素之外的内容？
我想使用HTML格式化一个面包屑path的链接» 相邻链接之间的实体，所以它看起来像这样：
首页 » 关于我们 » 历史 »此页面
我已经添加了一个规则到我的CSS：
nav#breadcrumb-trail a:after { content: " » "; }
但是这是添加实体内部的链接，而不是在外面 – 即我得到这个：
首页» 关于我们» 历史»此页面
我误解了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>
规范说：
正如它们的名字所表示的那样：before和之后：伪元素指定元素的文档树内容之前和之后的内容的位置。
请注意这句话结尾的关键词，它是指内部内容（或内部文本）。 所以，伪元素被插入到指定元素内容的结尾的开头。 因此，正确的双angular报价是插入超链接的文本之后 ，而不是超链接之后 。
这里有一个这样的链接与两个伪元素的DOM元素树的可视化表示：
a a:before content a:after
我想这个行为的一个解决方法是，将每个链接包装在一个span然后将样式应用于nav#breadcrumb-trail span:after ，但是这会导致不必要的标记……尽pipe如此，值得一试。
鉴于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>
