CSS ::before Pseudo-element

Imagine you’re setting up a theater stage and want to add a spotlight or an intro scene before the main act appears. In web design, the ::before pseudo-element in CSS works similarly. It allows you to insert content before an element’s actual content, making it perfect for adding decorative elements, icons, or any content that enhances the user experience.

Table of Contents

What is the ::before Pseudo-element?

The ::before pseudo-element is used to insert content before the content of a specified element. This can be anything from text and icons to images and shapes. The ::before pseudo-element is incredibly versatile and is often used for adding extra details that improve the visual appeal of your design.

Here’s how it looks:

element::before {
  content: " ";
  property: value;
}

Why Use the ::before Pseudo-element?

Enhanced Visuals: The ::before pseudo-element allows you to add visual elements that enhance the look and feel of your web page without adding extra HTML elements.

Dynamic Content: You can use the ::before pseudo-element to add dynamic content, such as icons or decorative elements, that can change based on the context or user interaction.

Simplified Code: Using the ::before pseudo-element can reduce the need for additional HTML elements, keeping your markup clean and maintainable.

Practical Examples

Let’s explore some practical examples to see how the ::before pseudo-element can be used effectively.

Example 1: Adding a Decorative Element

You can use the ::before pseudo-element to add a decorative element before a heading.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Decorative Element</title>
	
    <style>
	
        h1::before {
            content: "★";
            color: gold;
            margin-right: 10px;
        }
		
    </style>
</head>
<body>

    <h1>Welcome to My Website</h1>
	
</body>
</html>

In this example, the h1::before selector adds a gold star before the heading text, enhancing its visual appeal.

Example 2: Adding an Icon Before Links

You can use the ::before pseudo-element to add an icon before each link.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Icon Before Links</title>
	
    <style>
	
        a::before {
            content: "🔗";
            margin-right: 5px;
        }
		
    </style>
	
</head>
<body>

    <a href="https://example.com">Visit Example</a>
    <a href="https://another.com">Visit Another</a>
	
</body>
</html>

Here, the a::before selector adds a link icon before each anchor text, making the links more visually distinct.

Example 3: Creating a Custom List Style

You can use the ::before pseudo-element to create custom list item markers.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom List Style</title>
	
    <style>
	
		    ul {
			      list-style: none;
		    }
	
        ul li::before {
            content: "•";
            color: red;
            font-weight: bold;
            margin-right: 10px;
        }
		
    </style>
	
</head>
<body>

    <ul>
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
    </ul>
	
</body>
</html>

In this example, the ul li::before selector adds a red, bold bullet before each list item, creating a custom list style.

Example 4: Adding Quotes Before Blockquotes

You can use the ::before pseudo-element to add quotation marks before blockquote elements.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quotes Before Blockquotes</title>
    <style>
	
        blockquote::before {
            content: "“";
            font-size: 2em;
            color: gray;
            vertical-align: bottom;
            margin-right: 2px;
        }
		
    </style>
</head>
<body>

    <blockquote>
        This is a quote inside a blockquote.
    </blockquote>
	
</body>
</html>

Here, the blockquote::before selector adds a large gray quotation mark before the blockquote text, emphasizing the quoted text.

Conclusion

The ::before pseudo-element is a versatile and powerful tool in CSS, allowing you to insert content before an element’s actual content. Whether you’re adding decorative elements, icons, or custom list markers, the ::before pseudo-element helps you enhance your web design with dynamic and engaging content. So, the next time you want to add a little extra something before an element, remember the ::before pseudo-element — your key to creative and effective styling.