Open In App

How to write :hover condition for a:before and a:after in CSS?

Last Updated : 11 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

The :: before and :: after pseudo-elements in CSS insert content before or after elements. They are often used with the : hover pseudo-class to add interactive effects on hover. In CSS3, pseudo-elements use double colons (::), while older CSS2 syntax uses a single colon (:).

Syntax

a:hover::before {
// CSS Property
}
a:hover::after {
// CSS Property
}

In CSS3 double colon(::) is used to denote pseudo-element. For IE8 or older a single colon (CSS2 syntax) is used. 

Example 1: Simple Hover Effects with ::before and ::after

In this example, we will apply hover effects using ::before and ::after pseudo-elements. When the link is hovered, text will appear before and after the link text.

html
<html>
<head>
    <style>
        a:hover::before {
            content: "Before -";
        }

        a:hover::after {
            content: "-after";
        }
    </style>
</head>
<body>
    <a href="#"> Hover here </a>
</body>
</html>

Output:

onhover
:hover condition for a:before and a:after in CSS

Example 2: Adding Animation to the ::before and ::after Pseudo-elements

In this example, we will create a more sophisticated hover effect using ::before and ::after pseudo-elements. These pseudo-elements will add text before and after the link, and we will also apply animations to slide the elements in when the user hovers.

html
<html>
<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 50px;
            background-color: #f0f0f0;
        }

        a {
            text-decoration: none;
            font-size: 16px;
            color: black;
            position: relative;
            display: inline-block;
            padding: 10px 20px;
            background-color: white;
            border: 2px solid #ccc;
            border-radius: 8px;
            transition: background-color 0.3s ease;
        }

        a:hover {
            background-color: #e6ffe6;
        }

        a::before,
        a::after {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            color: white;
            background-color: green;
            padding: 5px 10px;
            border-radius: 5px;
            opacity: 0;
            transition: opacity 0.3s ease, transform 0.3s ease;
            white-space: nowrap;
            z-index: 1;
        }

        a::before {
            content: "Before";
            left: -70px;
        }

        a::after {
            content: "After";
            right: -60px;
        }

        a:hover::before,
        a:hover::after {
            opacity: 1;
            transform: translateY(-50%) translateX(0);
        }
    </style>
</head>
<body>
    <a href="#">Hover me!</a>
</body>
</html>

Output:

Gif
:hover condition for a:before and a:after in CSS

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.


Similar Reads