What is CSS Pseudo-elements?
Pseudo-elements act in a similar way, but, they work as if you had added a whole new HTML element into the markup, in place of utilizing a class to existing elements. Pseudo-elements start with a double colon ::.
For instance, it can be applied to:
- Style an element when a user mouses over it
- Style visited and unvisited links differently
- Style an element when it gets focus
They are used to style a specific part of an element and start with a :: .
We also use : as a pseudo-element for backward compatibility.
- Pseudo Element & Pseudo Class Syntax
- Example of CSS Pseudo Elements
- The :after pseudo-element
- The :before pseudo-element (Decorative example)
- The :first-line pseudo-element
- The :first-letter pseudo-element
- The ::selection pseudo element
::before
and ::after
are probably the most used pseudo-elements. They are used to add content before or after an element, like icons for example.
The pseudo-elements are:
::after |
creates a pseudo-element after the element |
::before |
creates a pseudo-element before the element |
::first-letter |
can be used to style the first letter of a block of text |
::first-line |
can be used to style the first line of a block of text |
::selection |
targets the text selected by the user |
Do Check:
Pseudo Element & Pseudo Class Syntax
The syntax of pseudo-element:
selector::pseudo-element { property: value; }
The syntax of pseudo-classes:
selector:pseudo-class { property: value; }
CSS classes can also be practiced with pseudo-elements −
selector.class:pseudo-element {property: value}
Examples of CSS Pseudo Elements
We want to make the font of the first line of the paragraph slightly bigger than the rest:
p::first-line { font-size: 1.5rem; }
Or maybe we want the first letter to be bigger and bolder:
p::first-letter { font-weight: bolder; font-size: 2rem; }
We can specify the content
property to insert any kind of content like image, after or before an element:
p::before { content: url(/myimage.png); } .myElement::before { content: "Hey There!"; }
The :after pseudo-element
<html> <head> <style type = "text/css"> p:after { content: url(/images/bullet.gif) } </style> </head> <body> <p> This line will be succeeded by a bullet.</p> <p> This line will be succeeded by a bullet.</p> <p> This line will be succeeded by a bullet.</p> </body> </html>
Output:
The :before pseudo-element (Decorative example)
HTML Code:
<span class="ribbon">Notice where the orange box is.</span>
CSS Code:
.ribbon { background-color: #5BC8F7; } .ribbon::before { content: "Look at this orange box."; background-color: #FFBA10; border-color: black; border-style: dotted; }
Output:
The :first-line pseudo-element
<html> <head> <style type = "text/css"> p:first-line { text-decoration: underline; } p.noline:first-line { text-decoration: none; } </style> </head> <body> <p class = "noline"> This line would not have any underline because this belongs to nline class. </p> <p> The first line of this paragraph will be underlined as defined in the CSS rule above. Rest of the lines in this paragraph will remain normal. This example shows how to use :first-line pseduo element to give effect to the first line of any HTML element. </p> </body> </html>
Output:
The :first-letter pseudo-element
The resulting example proves how to use the :first-letter element to add unique effects to the first letter of elements in the document.
<html> <head> <style type = "text/css"> p:first-letter { font-size: 5em; } p.normal:first-letter { font-size: 10px; } </style> </head> <body> <p class = "normal"> First character of this paragraph will be normal and will have font size 10 px; </p> <p> The first character of this paragraph will be 5em big as defined in the CSS rule above. Rest of the characters in this paragraph will remain normal. This example shows how to use :first-letter pseduo element to give effect to the first characters of any HTML element. </p> </body> </html>
Output:
The ::selection pseudo element
HTML Code:
This text has special styles when you highlight it. <p>Also try selecting text in this paragraph.</p>
CSS Code:
/* Make selected text gold on a red background */ ::selection { color: gold; background-color: red; } /* Make selected text in a paragraph white on a blue background */ p::selection { color: white; background-color: blue; }
Output: