什么是:: before或:: after表达式，为什么它显示在浏览器开发工具中？ [英] What is the ::before or ::after expression, and why is it shown in the browser developer tools?

问题描述

我已经读过 :: before 用于在使用它之前添加内容，例如

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

但大部分时间我都看过（通过开发人员工具）他们使用它们没有任何元素，例如

 < div class =btn-toolbarrole =toolbar> 
 :: before 
< div class =btn-group> 
< button type =buttonclass =btn btn-default>< span class =glyphicon glyphicon-align-left>< / span>< / button> 
< button type =buttonclass =btn btn-default>< span class =glyphicon glyphicon-align-center>< / span>< / button> 
< button type =buttonclass =btn btn-default>< span class =glyphicon glyphicon-align-right>< / span>< / button> 
< button type =buttonclass =btn btn-default>< span class =glyphicon glyphicon-align-justify>< / span>< / button> 
< / div> 
 :: after 
< / div>令人惊讶的是，当你看一下网页源代码时，这些 :: before   
 
 
 
为什么在开发人员工具中显示它们？ 
 
 
解决方案
 CSS-Tricks：
 
 
 CSS有一个称为content的属性。它只能用于伪
元素：after和：before。它写得像一个伪选择器
（带冒号），但它被称为伪元素，因为它不是
实际选择任何存在于页面上，但添加
新的页面。 
 
 
  :: before 在元素之前插入内容使用css。
  q :: before {
 content：«; 
 color：blue; 
} 
  
  :: after 在元素后插入内容。
  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:

  
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 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表达式，为什么它显示在浏览器开发工具中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！