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

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>

Answer 3

鉴于 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>

小警告：绝对定位的“元素包含在框的尺寸中，因此浮动或在其旁边对齐的元素无法动态尊重伪元素内容的宽度。