CSS Pseudo-elements

CSS Pseudo-elements

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  - 

  • Test I

  • Test II

Output -
Some pseudo-elements are given  -