html - 我可以制作 CSS :after pseudo element append content outside the element? 吗

Question

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

home » about us » history » this page

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

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

但这是在链接内部添加实体，而不是在链接外部 - 即我得到这个:

home » about us » history » this page

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

Answer 1

spec说:

As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element's document tree content.

注意这句话末尾的关键短语，它指的是内部内容(或内部文本)。因此，伪元素被插入到指定元素的内容内的开头和结尾。因此，正确的双引号被插入到超链接的文本之后，而不是超链接之后。

这是一个包含两个伪元素的链接的 DOM 元素树的可视化表示:

a
  a:before
  content
  a:after

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