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

问题描述

我已经读过

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

解决方案

CSS-Tricks：

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

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

在元素后插入内容。

  q :: after {
 content：»; 
 colour：red; 
} 
  

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

\2018 - Left Single Smart Quote

\2019 - Right Single Smart Quote

\ 00A9 - 版权

\2713 - 勾号

\2192 - 向右箭头

\2190 - 向左箭头

您也可以使用元素属性：

 < a title =网页设计社区。 href =http://css-tricks.com> CSS-Tricks< / a> 
 
 a：before {
 content：attr（title）：; 
} 
  

阅读完整的文章

I have read ::before is used to add content before the element you use it with, e.g.

p::before { 
    content: "Read this: ";
}

but most of the times I have seen (peeking at web pages through developer tools) they use them without any element, e.g.

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

Surprisingly when you look at web page source code these ::before or ::after elements are not displayed.

Why are they shown in developer tools?

解决方案

CSS-Tricks:

::before insert content before an element using css.

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

::after insert content after an element.

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

Demo

you can use Special Characters too, some of them:

\2018 - Left Single Smart Quote

\2019 - Right Single Smart Quote

\00A9 - Copyright

\2713 - Checkmark

\2192 - Right arrow

\2190 - Left arrow

you can use element attributes too:

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

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

read complete article here

这篇关于什么是:: before或:: after表达式，为什么它显示在浏览器开发工具中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！