5

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?

unor
  • 92,415
  • 26
  • 211
  • 360
leccionesonline
  • 618
  • 1
  • 8
  • 23
  • 3
    http://stackoverflow.com/questions/23719956/what-does-before-really-do ♦ http://stackoverflow.com/questions/22484020/what-do-before-and-after-mean – Hashem Qolami Oct 17 '14 at 21:33

1 Answers1

4

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

Mohamad Shiralizadeh
  • 8,329
  • 6
  • 58
  • 93
  • 5
    Not completely true: `::before` inserts content (text or text with images, but not HTML markup) before the *actual content* of the element (before its first child node, but still inside the element itself), similarly with `::after`, which inserts content after the actual content of the element (but still inside it). – Ilya Streltsyn Oct 17 '14 at 21:16
  • @IlyaStreltsyn I'd go beyond that and say "not true at all". – Hashem Qolami Oct 17 '14 at 22:19
  • Just to make it obvious... `p:before` and `p:after` is essentially the same as `

    I am :beforeContents of pI am :after

    ` - The pseudo elements are *inside* the element they are assigned to.     – misterManSam Oct 18 '14 at 05:52
  • 4
    The updated answer still doesn't explain the behavior of `::before`/`::after` pseudo-elements properly. And the quoted phrase, also, is not relevant. The question is about why they are shown in Developer tools but are not shown in HTML source. This is because - obviously - you can't modify the content of a document by CSS. In fact, pseudo-elements are added into the DOM, not the HTML source. – Hashem Qolami Oct 18 '14 at 07:54