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有一个名为content的属性。它只能与伪一起使用元素：之后和：之前。它被写成伪选择器（使用冒号），但它被称为伪元素，因为它不是实际上选择页面上存在但添加的任何内容页面上的新内容。

::before使用css在元素前插入内容。

q::before { 
  content: "«";
  color: blue;
}

::after在元素后插入内容。

q::after { 
  content: "»";
  color: red;
}

Demo

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

\ 2018 - 左单智能报价

\ 2019 - Right Single Smart Quote

\ 00A9 - 版权

\ 2713 - 复选标记

\ 2192 - 右箭头

\ 2190 - 左箭头

您也可以使用元素属性：

<a title="A web design community." href="http://css-tricks.com">CSS-Tricks</a>

a:before {
   content: attr(title) ": ";
}

阅读完整文章here

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

1 个答案: