The before pseudo-element
The before pseudo-element inserts a text
before an element. It is used only in conjunction
with the
content
property, which specifies the text to insert.
Syntax
selector::before {
content: 'text';
}
Example
Let's make it so that when you hover over
li, text is inserted at the start
of it:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li:hover::before {
content: '!!!';
}
:
Example
You can apply different styles to the inserted text. Let's color this text in some color, for example:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li:hover::before {
color: red;
content: '!!!';
}
:
See also
-
the
afterpseudoelement
that makes an insert after a tag text -
the
attrfunction
that gets a value of a tag attribute -
the
counter-incrementproperty
that sets automatic numbering
