CSS Pseudo-Elements
Pseudo-elements are added to selectors but instead of describing a special state, they allow you to style certain parts of a document.
The content attribute is required for pseudo-elements to render;
however, the attribute can have an empty value (e.g. content: "").
A pseudo-element lets you select only part of a matched element. Pseudo-elements are specified with a double colon (::) followed by the pseudo-element name.
We haven’t discussed block vs. inline elements yet, but it should be noted that some pseudo-elements only apply to block-level elements.
Syntax -
|
selector::pseudo-element {
property: value;
}
|
:first-line pseudo-element
Matches the first line of a block element
Now we will see example -
Example -
The following example demonstrates how to use the :first-line element to add special effects to the first line of elements in a document -
Output -
Before and after pseudo elements -
|
div::after {
content: 'after';
color: red;
border: 1px solid red;
}
div {
color: black;
border: 1px solid black;
padding: 1px;
}
div::before {
content: 'before';
color: green;
border: 1px solid green;
|
Output -
Pseudo-Elements in Lists
Pseudo-elements are often used to change the look of lists (mostly for unordered lists, ul)
The first step is to remove the default list bullets:
|
ul {
list-style-type: none;
}
|
Then you add the custom styling. In this example, we will create gradient boxes for bullets.
|
li:before {
content: "";
display: inline-block;
margin-right: 10px;
height: 10px;
width: 10px;
background: linear-gradient(red, blue);
}
|
HTML -
Output -
Some pseudo-elements are given -
