我读过 ::before
用于在您使用它的元素之前添加内容,例如
p::before {
content: "Read this: ";
}
但我看到的大多数时候(通过开发人员工具查看网页)他们在没有任何元素的情况下使用它们,例如
<div class="btn-toolbar" role="toolbar">
::before
<div class="btn-group">
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button>
</div>
::after
</div>
令人惊讶的是,当您查看网页源代码时,这些 ::before
或 ::after
元素并未显示。
为什么它们显示在开发者工具中?
最佳答案
CSS 技巧:
CSS has a property called content. It can only be used with the pseudo elements :after and :before. It is written like a pseudo selector (with the colon), but it's called a pseudo element because it's not actually selecting anything that exists on the page but adding something new to the page.
::before使用 css 在元素前插入内容。
q::before {
content: "«";
color: blue;
}
::after在元素后插入内容。
q::after {
content: "»";
color: red;
}
你也可以使用特殊字符,其中一些:
\2018 - 左单智能引号
\2019 - 右单智能引号
\00A9 - 版权
\2713 - 复选标记
\2192 - 向右箭头
\2190 - 向左箭头
你也可以使用元素属性:
<a title="A web design community." href="http://css-tricks.com">CSS-Tricks</a>
a:before {
content: attr(title) ": ";
}
阅读完整文章 here
关于html - 什么是::before 或::after 表达式,为什么它会显示在浏览器开发人员工具中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26433223/