CSS pseudo-elements
CSS Pseudo-Elements
CSS pseudo-elements are used to add special effects to certain selectors. You don’t need to use JavaScript or any other scripts to use these effects. The simple syntax for pseudo-elements is as follows −
selector:pseudo-element {property: value}
CSS classes can also be used with pseudo-elements –
selector.class:pseudo-element {property: value}
Common pseudo-elements are as follows:
| Number | Value and Description |
|---|---|
| 1 | :first-line is used to add special styles to the first line of text in the selector. |
| 2 | :first-letter is used to apply special styles to the first letter of the text in the selector. |
| 3 | :before is used to insert some content before an element. |
| 4 | :after is used to insert some content after an element. |
:first-line pseudo-element
The following example demonstrates how to use the :first-line element to add special effects to the first line of an element in a document.
<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
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>
It will generate the following link −
:first-letterPseudo-Element
The following example demonstrates how to use the :first-letter element to add a special effect to the first letter of an element in a 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>
It will generate the following black link −
:beforePseudo-Element
The following example demonstrates how to use the :before element to add some content before any element.
<html>
<head>
<style type = "text/css">
p:before {
content: url(/https://coder-cafe.com/wp-content/uploads/2025/09/images/bullet.gif)
}
</style>
</head>
<body>
<p> This line will be preceded by a bullet.</p>
<p> This line will be preceded by a bullet.</p>
<p> This line will be preceded by a bullet.</p>
</body>
</html>
It will generate the following black link−
:afterPseudo-Element
The following example demonstrates how to use the :after element to add content after any element.
<html>
<head>
<style type = "text/css">
p:after {
content: url(/https://coder-cafe.com/wp-content/uploads/2025/09/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>
It will generate the following black link −
