CSS - Pseudo Elements

css

https://www.sitepoint.com/css-pseudo-elements/

// CSS - Pseudo-Elements:

Pseudo-Elements are not real because they do not exist in the page.  
A CSS pseudo-element is used to style specified parts of an element.  For
example, it can be used to style the first letter, or line of an element. It
can be used to generate content before, or after, the content of an element.

selector::pseudo-element {
    property:value;
}

p::first-line {
    color: #ff0000;
    font-variant: small-caps;
}

p::first-letter {
    color: #ff0000;
    font-size: xx-large;
}

The ::before pseudo-element can be used to insert some content before the 
content of an element.

h1::before {
    content: url(smiley.gif);
}

h1::after {
    content: url(smiley.gif);
}

The ::selection pseudo-element matches the portion of an element that is 
selected by a user.

::selection {
    color: red;
    background: yellow;
}