我可以让CSS:after伪元素在元素之外附加内容吗?

我想使用HTML格式设置链接的面包屑路径&拉阔相邻链接之间的实体,因此看起来如下所示:

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

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

nav#面包屑痕迹a:之后{
内容:“»”;
}

但这是在链接内部添加实体,而不是在链接外部-即,我得到以下结果:

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

我是否误解了CSS:after伪元素的行为?文档似乎暗示它在指定元素之后添加指定的内容,而不是在元素容器内部预先添加。有什么想法吗

说明书上说:

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

注意句子末尾的关键短语,它指的是内部内容(或内部文本)。因此,伪元素被插入到指定元素的内容中的末尾的开头。因此,在超链接的文本之后插入右双角度引号,而不是在超链接之后插入右双角度引号

下面是一个DOM元素树的可视化表示,其中一个链接包含两个伪元素:

a
a:以前
所容纳之物
a:以后

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

发表评论