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

I've read :: before to be used before that element You use it, eg

  p: before {content: "read it:"; }  

But I have seen many times (by looking at the web page through developer tools) they use them without any element, e.g.

  & lt; Div class = "btn-toolbar" role = "toolbar" & gt; :: First and lieutenant; Div class = "btn-group" & gt; & Lt; Button type = "button" class = "btn btn-default" & gt; & Lt; Span class = "glyphicon glyphicon-align-left" & gt; & Lt; / Span & gt; & Lt; / Button & gt; & Lt; Button type = "button" class = "btn btn-default" & gt; & Lt; Span class = "glyphicon glyphicon-align-center" & gt; & Lt; / Span & gt; & Lt; / Button & gt; & Lt; Button type = "button" class = "btn btn-default" & gt; & Lt; Span class = "glyphicon glyphicon-align-right" & gt; & Lt; / Span & gt; & Lt; / Button & gt; & Lt; Button type = "button" class = "btn btn-default" & gt; & Lt; Span class = "glyphicon glyphicon-align-justify" & gt; & Lt; / Span & gt; & Lt; / Button & gt; & Lt; / Div & gt; :: After & lt; / Div & gt;  

Surprisingly, when you view the web page source code, then it's : before: or :: after element Are not displayed.

Why have they been shown in the Developer Tools?

CSS-Tricks:

Content of CSS is the property named Only can be used with pseudo-elements: After and: first it has been written like a pseudo selector (with colon), but it is called a pseudo-element because it is not actually choosing anything present on the page , But to add something new to the page.

Insert the content before using CSS.

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

Insert content after one element.

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

You can also use special characters, some of them:

\ 2018 - Left single smart quotes

\ 2019 - The right single smart quote

\ 00A9 - Copyright

\ 2713 - Checkmark

\ 2192 - Right Arrow

< P> \ 2190 - Left arrow

You can also use element attributes:

  & lt; A title = "web design community." Href = "http://css-tricks.com" & gt; CSS-Tricks & lt; / A & gt; A: {content: before attr (title): ";"; }  

Read the full article