Html 我可以让 CSS :after 伪元素在元素外追加内容吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5362811/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I make the CSS :after pseudo element append content outside the element?
提问by Dylan Beattie
I want to format a breadcrumb trail of links using an HTML »entity between adjacent links, so it looks like this:
我想使用»相邻链接之间的 HTML实体格式化链接的面包屑路径，所以它看起来像这样：
I've added a rule to my CSS:
我在 CSS 中添加了一条规则：
nav#breadcrumb-trail a:after {
content: " ? ";
}
but this is adding the entity INSIDE the link, instead of outside it - i.e. I'm getting this:
但这是在链接内添加实体，而不是在链接外 - 即我得到这个：
home » about us » history » this page
Am I misunderstanding the behaviour of the CSS :afterpseudo-element? Documentation seems to imply it adds the specified content afterthe specified element, rather than prepending it to the inside of the element's container. Any ideas?
我误解了 CSS:after伪元素的行为吗？文档似乎暗示它在指定元素之后添加指定内容，而不是将其添加到元素容器的内部。有任何想法吗？
采纳答案by kapa
Normally you code these menus as ordered lists anyway, so it makes sense to do something like this instead:
通常情况下，您无论如何都将这些菜单编码为有序列表，因此改为执行以下操作是有意义的：
#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>回答by BoltClock
The specsays:
该规范说：
As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element's document tree content.
顾名思义，:before 和:after 伪元素指定元素的文档树内容之前和之后的内容位置。
Note the key phrase at the end of this sentence, which refers to the inner content (or inner text). So, the pseudo-elements are inserted into the beginning of the end withinthe specified elements' content. Therefore the right double angled quote is being inserted after the textof your hyperlinks, rather than after the hyperlinks.
请注意这句话末尾的关键短语，它指的是内部内容（或内部文本）。所以，伪元件被插入到端的开头内指定的元素含量。因此，正确的双角引号被插入在您的超链接文本之后，而不是在 hyperlinks 之后。
Here's a visual representation of the tree of the DOM element for one such link with both pseudo-elements:
下面是一个带有两个伪元素的链接的 DOM 元素树的可视化表示：
a
a:before
content
a:after
I guess one workaround to this behavior, is to wrap each link in a spanthen apply styles to nav#breadcrumb-trail span:after, but that'd result in unnecessary markup... worth a shot in any regard though.
我想这种行为的一种解决方法是将每个链接包装在 中，span然后将样式应用于nav#breadcrumb-trail span:after，但这会导致不必要的标记......尽管在任何方面都值得一试。
回答by Philzen
Given the flexibility and awesomenessof CSS, it looks pretty much do-able. Tried this in current Chrome, FF, and IE and it does the job just as expected, without the need to add addtional markup:
考虑到灵活性和迷死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>Small Caveat: Absolutely positioned `elements are included in the boxes' dimensions, therefore elements floating or aligned next to it are unable to dynamically respect the width of the pseudo elements' content.
小警告：绝对定位的`元素包含在盒子的尺寸中，因此浮动或对齐在它旁边的元素无法动态地尊重伪元素内容的宽度。
