什么是::前真的做什么？ [英] what does ::before really do?
问题描述
所以我读了文档，可能了解 :: before 和 :: after 之后的目的。如果我的理解是正确的，他们应该总是与其他元素结合工作。但我正在看的网页有这样的：
So I read the docs and probably understand the purpose of ::before and ::after. If my understanding is correct, they should always work in combination with other elements. But the web page I'm looking at has got something like this:
<body>
<div class="container-fluid">
::before
<div> ... </div>
::after
</div>
<body>
我不能理解 :: before
I'm not able to understand what ::before and ::after are doing here?
推荐答案
伪元素通常不会显示在HTML元素树中。但是，如果你使用正确的调试工具（如Chrome检查器），你可以看到这些特殊的元素。
Pseudo-elements are typically not shown in HTML element trees. However, if you are using the right kind of a debugging tool (like Chrome inspector) you can see these special elements. As its nowadays very common to style a page using pseudo-selectors, it is very useful to have a debugging tool that can display them.
使用伪选择器对页面进行样式化是非常有用的。要从Chrome浏览器验证此行为，检查器（或其他有能力的工具），请尝试使用CSS向某些伪元素添加一些内容，例如：
To verify this behaviour from your Chrome inspector (or other capable tool), try adding some content to some of those pseudo-elements with CSS, for instance:
h1:before {
content: 'before';
}
这篇关于什么是::前真的做什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
