What is the ::before or ::after expression, and why is it shown in the browser developer tools?

问题

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?

回答1:

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

来源：https://stackoverflow.com/questions/26433223/what-is-the-before-or-after-expression-and-why-is-it-shown-in-the-browser-d

标签

html

css

pseudo-element