CSS Pseudo-element

What are Pseudo-Elements?

A CSS pseudo-element is used to style specified parts of an element.

For example, it can be used to:

  • Style the first letter, or line, of an element
  • Insert content before, or after, the content of an element

Syntax

The syntax of pseudo-elements:

Example

selector::pseudo-element {
  property:value;
}

The ::first-line Pseudo-element

The ::first-line pseudo-element is used to add a special style to the first line of a text.

Example

<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
</style>
</head>
<body>

<p>You can use the ::first-line pseudo-element to add a special effect to the first line of a text. Some more text. And even more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more.</p>

</body>
</html>

Output

You can use the ::first-line pseudo-element to add a special effect to the first line of a text. Some more text. And even more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more.

The ::first-letter Pseudo-element

The ::first-letter pseudo-element is used to add a special style to the first letter of a text.

Example

<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
</style>
</head>
<body>

<p>You can use the ::first-letter pseudo-element to add a special effect to the first character of a text!</p>

</body>
</html>

Output

You can use the ::first-letter pseudo-element to add a special effect to the first character of a text!

CSS – The ::before Pseudo-element

The ::before pseudo-element can be used to insert some content before the content of an element.

Example

h1::before {
  content: url(https://wpthemify.com/css/wp-content/uploads/2019/02/smiley.gif);
}

CSS – The ::after Pseudo-element

The ::after pseudo-element can be used to insert some content after the content of an element.

Example

h1::after {
  content: url(https://wpthemify.com/css/wp-content/uploads/2019/02/smiley.gif);
}
Updated: February 7, 2019 — 6:13 am
Java Script © 2019