我可以做的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>