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

【问题标题】：Can I make the CSS :after pseudo element append content outside the element?我可以让 CSS :after 伪元素在元素之外附加内容吗？
【发布时间】：2023-03-15 20:09:01
【问题描述】：

我想在相邻链接之间使用 HTML &raquo; 实体格式化链接的面包屑路径，所以它看起来像这样：

home » about us » history » 本页

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

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

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

home » about us » history » 这个页面

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

【问题讨论】：

标签： html css css-selectors pseudo-element

【解决方案1】：

spec 说：

如其名称所示，:before 和 :after 伪元素指定了元素的文档树内容之前和之后的内容位置。

注意这句话末尾的关键短语，它指的是内部内容（或内部文本）。因此，伪元素被插入到末尾in指定元素的content的开头。因此，右双角引号插入超链接文本之后，而不是超链接之后。

这是一个带有两个伪元素的链接的 DOM 元素树的可视化表示：

a
  a:before
  content
  a:after

我想解决此问题的一种方法是将每个链接包装在 span 中，然后将样式应用到 nav#breadcrumb-trail span:after，但这会导致不必要的标记...不过无论如何都值得一试。

【讨论】：

在 CSS3 生成内容模块中有针对 ::outside pseudo-element 的建议，但不知道它是否会推迟到未来的规范或完全废弃，因为该模块目前的优先级相当低对于大多数供应商。
这应该是正确的答案，因为它实际上回答了提出的问题。我知道 kapa 为这个问题提供了一个很好的解决方案，但 BoltClock 的帖子实际上回答了这个问题。
@Luke 我在下面的答案中找到的方法也是如此 - 即使没有额外的标记。
从某种意义上说，是的，只是您的解决方案使用绝对定位，这对:after 的行为，BoltClock 的回答做得很好。
终于有人能真正回答所有这些问题（这个问题和所有其他相关问题）......

【解决方案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>

【讨论】：

另外，#breadcrumb-trail li:last-child:after { content: none; }
考虑到页面组织的顺序具有语义意义，我使用了有序列表而不是无序列表 - 但除此之外，这非常有效（IE8 除外，但是嗯）跨度>
我同意最后一个孩子的东西和有序列表。谢谢。

【解决方案3】：

鉴于 CSS 的灵活性和awesomeness，它看起来非常可行。在当前的 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>

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

【讨论】：

确实——这在很大程度上取决于您对“元素框外”的解释以及您的预期结果。您只需要手动定位伪元素 - 例如，您无法触发自然浮动布局或表格布局等，因为伪元素框始终创建为原始元素框的子元素。
@BoltClock 非常正确，好点。我已将此限制添加到我的答案中。