CSS :after

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

The syntax for the :after pseudo-element is:

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

Where:

ParameterDescription
selectorThe HTML element after 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 :after content.

Examples

1. Adding Decorative Content After a Heading

In this example, a decorative asterisk (*) is added after each heading using the :after pseudo-element.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        h2:after {
            content: " *";
            color: red;
            font-size: 1.2em;
        }
    </style>
</head>
<body>
    <h2>CSS Tutorial</h2>
    <h2>Learn the :after Pseudo-Element</h2>
</body>
</html>

2. Adding Icons After Links

Here, an external link icon is added after each link using the :after pseudo-element.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        a:after {
            content: " 🔗";
            font-size: 1em;
            color: gray;
        }
    </style>
</head>
<body>
    <a href="https://example.com">Visit Example</a>
    <a href="https://tutorial.com">Visit Tutorial</a>
</body>
</html>

3. Adding Decorative Lines After Sections

In this example, a horizontal line is added after each section using the :after pseudo-element.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        section:after {
            content: "";
            display: block;
            height: 1px;
            background-color: black;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <section>This is the first section.</section>
    <section>This is the second section.</section>
</body>
</html>

4. Adding Quotation Marks to a Paragraph

Here, quotation marks are added around 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: 1.5em;
            color: gray;
        }

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

5. Adding Custom Indicators After List Items

In this example, custom indicators are added after list items using the :after pseudo-element.

index.html

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