html ::before ::after pseudo-elements

Sometimes, when I inspect an element on a webpage by right-clicking the element and choosing the “Inspect Element” menu item, I can find an interesting element “::before” or “::after” inside the element like the following:

But when I right-click on the page and select the “View Page Source” menu item, I cannot find the string “::before” or “::after” inside the element in the source code.

What are ::before and ::after? Well, they are called pseudo-elements. Pseudo-elements are part of CSS which allow you to insert content before/after the actual content of an element(but still inside the element).

Since pseudo-elements belong to CSS, you cannot write them in html as ordinary elements, but write them using CSS syntax, i.e., using a selector such as “p::before” followed by css properties contained in {}. The following is a pseudo-element example

p::before
{
    content:"before actual element content";
}

The content of the pseudo-element will be shown before the real content of the element in your browser, but not shown in the Inspector window in your browser(such as firefox) when you inspect the element(see the above image). Fortunately, you can click the pseudo-element (shown as “::before” or “::after”) and the definition of the pseudo-element will be shown in the css panel next to the html panel in the Inspector window.

The pseudo-elements can be not only text but also an image.

Did you like this?
Tip admin with Cryptocurrency