6.1 The content Property
The pseudo-elements ::before and ::after let you add content before and after an element's content without changing the HTML code. They are widely used for decorative purposes, UI enhancement, and making web pages more interactive.
What are the ::before and ::after pseudo-elements?
The ::before and ::after pseudo-elements create virtual elements that are inserted respectively before and after the content of the selected element. These pseudo-elements are often used to add icons, decorative stuff, or other visual effects.
Before Syntax:
selector::before {
content: "text or other values";
/* styles */
}
After Syntax:
selector::after {
content: "text or other values";
/* styles */
}
The content Property
The key property for the ::before and ::after pseudo-elements is content. This property defines the content of the pseudo-element. It can be a text string, an image, or even an empty value if you just want a visual effect.
Possible values for the content property:
- Text:
"text" - Image:
url("path/to/image.png") - Empty value:
"" - Attributes:
attr(attributeName) - Counters:
counter(name)
6.2 Examples of Using ::before and ::after
Adding Decorative Elements
Example 1: Adding an icon before text
In this example, the ::before pseudo-element is used to add an icon before the text of a link. margin-right adds space between the icon and the text:
/* Adding an icon before link text */
a::before {
content: "🔗";
margin-right: 5px;
}
Example 2: Adding a decorative element after a paragraph
In this example, the ::after pseudo-element adds a decorative element after a paragraph. display: block and text-align: right are used to align the element to the right edge:
/* Adding a decorative element after a paragraph */
p::after {
content: "❦";
display: block;
text-align: right;
color: red;
}
Creating Decorative Borders and Backgrounds
Example 3: Decorative border around an element
In this example, the ::before pseudo-element is used to create a decorative stripe above a div element. position: absolute and top: -10px allow positioning the stripe above the element:
/* Decorative border around an element */
div::before {
content: "";
display: block;
width: 100%;
height: 10px;
background-color: #3498db;
position: absolute;
top: -10px;
left: 0;
}
Example 4: Automatic quote addition
In this example, the ::before and ::after pseudo-elements are used to add quotes around a blockquote:
/* Automatic quote addition around a blockquote */
blockquote::before {
content: "“";
font-size: 2em;
color: #ccc;
}
blockquote::after {
content: "”";
font-size: 2em;
color: #ccc;
}
Example 5: Heading numbering
In this example, the ::before pseudo-element is used to add a number before an h2 heading. counter-increment increments the counter value, and content: counter(section) inserts the current counter value:
/* Heading numbering */
h2::before {
counter-increment: section;
content: counter(section) ". ";
font-weight: bold;
}
6.3 Applying and Styling Pseudo-elements
Styling Pseudo-elements
Pseudo-elements can be styled just like any other elements. They support most CSS properties, including color, background, borders, size, and positioning.
Using Pseudo-elements to Create Complex Layouts
Pseudo-elements are often used for creating decorative elements in layouts, such as borders, shadows, and other visual effects, without needing to add extra HTML elements.
Example: each list item will have a blue bullet before the text:
ul li::before {
content: "•";
color: blue;
margin-right: 5px;
}
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
6.4 Example of a Complete Implementation
/* Adding an icon before link text */
a::before {
content: "🔗";
margin-right: 5px;
}
/* Adding a decorative element after a paragraph */
p::after {
content: "❦";
display: block;
text-align: right;
color: red;
}
/* Decorative border around an element */
.decorative-box {
position: relative;
}
.decorative-box::before {
content: "";
display: block;
width: 100%;
height: 10px;
background-color: #3498db;
position: absolute;
top: -10px;
left: 0;
}
/* Automatic quote addition around a blockquote */
blockquote::before {
content: "“";
font-size: 2em;
color: #ccc;
}
blockquote::after {
content: "”";
font-size: 2em;
color: #ccc;
}
/* Heading numbering */
h2::before {
counter-increment: section;
content: counter(section) ". ";
font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of Pseudo-elements ::before and ::after</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<a href="#">Link with an icon</a>
<p>Paragraph with a decorative element after the text</p>
<div class="decorative-box">Element with a decorative border</div>
<blockquote>Quote with automatic quotes</blockquote>
<h2>Heading with numbering</h2>
<h2>Another heading</h2>
</body>
</html>
GO TO FULL VERSION