CSS :before

The CSS :before pseudo-element is used to insert content before an element’s actual content. It is commonly used for adding decorative elements, icons, or additional text without modifying the HTML structure.

The syntax for the :before pseudo-element is:

</>
Copy
selector:before {
    content: "text or content";
    property: value;
}

Where:

ParameterDescription
selectorThe HTML element before which the pseudo-element content will appear.
contentThe content to be inserted. It can be text, an image, or other content defined in CSS.
propertyThe CSS properties to style the :before content.

Examples

1. Adding Decorative Content Before a Heading

In this example, a decorative arrow is added before each heading using the :before pseudo-element.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        h2:before {
            content: "→ ";
            color: blue;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h2>Welcome to CSS Tutorials</h2>
    <h2>Learn the :before Pseudo-Element</h2>
</body>
</html>

2. Adding Icons Before List Items

Here, a checkmark icon is added before each list item using the :before pseudo-element.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        li:before {
            content: "✔ ";
            color: green;
        }
    </style>
</head>
<body>
    <ul>
        <li>HTML Basics</li>
        <li>CSS Fundamentals</li>
        <li>JavaScript Introduction</li>
    </ul>
</body>
</html>

3. Adding Labels Before Form Fields

In this example, a text label is added before form fields using the :before pseudo-element.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        input:before {
            content: "Enter:";
            font-weight: bold;
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <form>
        <input type="text" placeholder="Your Name">
    </form>
</body>
</html>

4. Adding Quotation Marks to a Paragraph

Here, quotation marks are added before and after the content of a paragraph using the :before and :after pseudo-elements.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        p:before {
            content: "“";
            font-size: 2em;
            color: gray;
        }

        p:after {
            content: "”";
            font-size: 2em;
            color: gray;
        }
    </style>
</head>
<body>
    <p>CSS is amazing!</p>
</body>
</html>

5. Creating Decorative Borders Before Elements

In this example, a vertical line is added before block elements as a decorative border.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        div:before {
            content: "";
            display: inline-block;
            width: 5px;
            height: 100%;
            background-color: black;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div>This is a block element with a decorative border.</div>
</body>
</html>