我想»
在相邻链接之间使用 HTML 实体格式化链接的面包屑路径,所以它看起来像这样:
我在我的 CSS 中添加了一条规则:
nav#breadcrumb-trail a:after {
content: " » ";
}
但这是在链接内部添加实体,而不是在链接外部 - 即我得到这个:
我是否误解了 CSS:after
伪元素的行为?文档似乎暗示它在指定元素之后添加指定内容,而不是将其添加到元素容器的内部。有任何想法吗?
我想»
在相邻链接之间使用 HTML 实体格式化链接的面包屑路径,所以它看起来像这样:
我在我的 CSS 中添加了一条规则:
nav#breadcrumb-trail a:after {
content: " » ";
}
但这是在链接内部添加实体,而不是在链接外部 - 即我得到这个:
我是否误解了 CSS:after
伪元素的行为?文档似乎暗示它在指定元素之后添加指定内容,而不是将其添加到元素容器的内部。有任何想法吗?
规范说:
正如它们的名字所示,:before 和 :after 伪元素指定了元素文档树内容之前和之后的内容位置。
注意这句话末尾的关键短语,它指的是内部内容(或内部文本)。因此,伪元素被插入到指定元素内容的结尾的开头。因此,在超链接文本之后插入右双角引号,而不是在超链接之后。
这是一个带有两个伪元素的此类链接的 DOM 元素树的可视化表示:
a
a:before
content
a:after
我想这种行为的一种解决方法是将每个链接包装在一个span
然后将样式应用到 中nav#breadcrumb-trail span:after
,但这会导致不必要的标记……尽管如此,无论如何都值得一试。
通常你将这些菜单编码为有序列表,所以这样做是有意义的:
#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>
鉴于 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>
小警告:绝对定位的“元素包含在盒子的尺寸中,因此在它旁边浮动或对齐的元素无法动态尊重伪元素内容的宽度。