after pseudo-element
The after pseudo-element inserts a text
after an element. It is used only in conjunction
with the
content
property, which specifies the text to insert.
Syntax
selector::after {
content: 'text';
}
Example
Let's make it so that when you hover over
li, text is inserted at the end 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::after {
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::after {
color: red;
content: '!!!';
}
:
See also
-
the
beforepseudoelement
that makes an insert before a tag text -
the
attrfunction
that gets a value of a tag attribute -
the
counter-incrementproperty
that sets automatic numbering