html - 什么是::before 或::after 表达式，为什么它会显示在浏览器开发人员工具中？

Question

我读过 ::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 元素并未显示。

为什么它们显示在开发者工具中？

Answer 1

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;
}

Demo

你也可以使用特殊字符，其中一些:

\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