CSS psuedo-elements :hover::after doesn't execute an animation

Question

Recently, I've been building a website for a keyboard-enthusiast business. On the home page, I have category buttons that animate when hovered. However, it abruptly ends once the mouse cursor is no longer on it. To combat this problem, I decided to use the psuedo-elements: :hover::after. I created a new animation called afterbuttonslide with the following code and assigned it to the psuedo-element like this:

    @keyframes afterbuttonhoverslide {
        0% {
            padding: 0 25 0 0;
            }
        100% {
            padding: 0;
            }
        }
    
    .homepagecategories:hover::after {
        animation: 0.2s ease-out 0s 1 afterbuttonhoverslide;
        animation-fill-mode: forwards;  
        }

This however doesn't execute the animation as intended. After reading other Stack Overflow answers such as Deepak Yadev's and an article from GeeksforGeeks, I tried adding content: ""; and temporaily removing my psuedo-element :hover with underwhelming results. Perhaps the psuedo-element :after is simply ineffective on anything but anchors? I'm willing to take any answer that can provide me with the same result I intended before.

Rest of my code:

<head>
    <title>HotDogKeyboards</title>
    <link rel="icon" href="https://drive.google.com/uc?export=download&id=1Ka7ylovILyZSEcIUTituT9f_uzFdKfCl">
</head>
<body style="margin: 0; padding: 0; background-color: #2e3440;">

<!-- This style element is temporary to display CSS on the same script as my HTMl code. -->
<style>
    /* Imported Fonts */
@font-face {
    font-family: Roboto;
    src: url(https://drive.google.com/uc?export=download&id=1PopP9idetRz1ULFNGXyP6kraMyV4bt5F);
    }

@font-face {
    font-family: Poppins;
    src: url(https://drive.google.com/uc?export=download&id=16AyE8WbBCW13Z-Ixbmctio3TKuajAhwt);
    }

@font-face {
    font-family: indie-flower;
    src: url(https://drive.google.com/uc?export=download&id=1NosWGJF7-PsfwCHZI_es8anZhO_bz8wu);
    }

@font-face {
    font-family: red-seven;
    src: url(https://drive.google.com/uc?export=download&id=1Xs4IIqDBGc_lCYFBLeC6DPhohsJPBeTp);
    }

@font-face {
    font-family: good-times;
    src: url(https://drive.google.com/uc?export=download&id=1nj8_G-SMT-2Bqh8kVdRJ0w7D8DXzmomC);
    }


/* Property specific classes*/
h1.temporarywait {
    font-family: Roboto;
    }

p.temporarywait {
    font-family: Poppins;
    }

img.mainicon {
    width: 13%;
    }

a.headerbuttons {
    padding: 10px 15px 10px 15px;
    font-size: 27px;
    font-family: indie-flower;
    text-decoration: none;
    color: black;
    }

a:visited.headerbuttons {
    color: black;
    }

a:active.headerbuttons {
    color: white;
    background-color: #FFFF9F;
    margin: 0;  
    }

a:hover.headerbuttons {
    background-color: #FFF017;
    color: white;
    }

a:hover.button {
    background-color: #EFCC00;
    }

a:visited.button {
    color: black;
    }

p.categorytop {
    font-family: good-times;
    color: white;
    font-size: 3vw;
    text-align: center;
    }


/* Classes */
.header {
    background-color: #EAAA00;
    padding: 25px;
    margin: 0;
    position: fixed;
    z-index: 99;
    width: 100%;
    /*TEMPORARY, REMOVE WHEN NECESSARY*/
    opacity: 0%;
    }

.headerbuttons {
    display: inline-block;
    padding: 2.5px 4px 2.5px 4px;
    margin: 0;
    }

.headerlinkwrapper {
    background-color: #EFCC00;
    width: 100%;
    position: fixed;
    margin: 0 0 0 -25;
    z-index: 99;
    }

.featuredproducttext {
    position: absolute;
    top: 50%;
    left: 30px;
    color: white;
    font-family: red-seven;
    font-size: 2.2vw;
    }

.featuredproductbutton {
    position: absolute;
    top: 75%;
    left: 30px;
    }

.button {
    background-color:#EAAA00;
    text-align: center;
    text-decoration: none;
    padding: 1.5vw 2vw;
    font-size: 2vw;
    font-family: Poppins;
    color: black;
    }

.featuredproductinfo {
    position: absolute;
    top: 60%;
    left: 30px;
    color: white;
    font-size: 1.3vw;
    font-family: red-seven;
    }

.categorytop {
    padding: 0.5em 0 0.5em 0;
    background-color: #434c5e;
    margin: 4px 0 0 0;
    }

.categorytext {
    color: #e5e9f0;
    font-family: good-times;
    font-size: 1.7vw;
    position: absolute;
    top: 23%;
    left: 5px;
    }
/*Class Animations*/
.featuredproducttext {
    animation: 1.7s ease-out 0s 1 slidein;
    }

.featuredproductinfo {
    animation: 1s ease-out 0s 1 slidein;
    animation-fill-mode: both;
    animation-delay: 1.7s;
    }

.featuredproductbutton {
    animation: 1.5s ease-out 0s 1 slideappearance;
    animation-fill-mode: both;
    animation-delay: 2.9s;
    }

.headershowanimation {
    animation: 1s ease-out 0s 1 headershow;
    }

.headerhideanimation {
    animation: 1s ease-out 0s 1 headershow;
    }

.homepagecategories {
    width: 20%; 
    height: 17.6vw;
    transform: skew(-20deg);
    display: inline-block;
    margin: -5;
    overflow: hidden;
    }

/*Homepage Category Images*/
.category1 {
    background-image: url("https://drive.google.com/uc?export=download&id=1EmJgZ15Se4XmJUSD4asHA2fu-vhYphvx");
    }

.category2 {
    background-image: url("https://drive.google.com/uc?export=download&id=1iyEtTFXeYrKK-shG16nixjcX7W54vqv1");
    }

.category3 {
    background-image: url("https://drive.google.com/uc?export=download&id=1iPUbZjhhx7Nu_8tPoRniJGjPcj6zJAI6");
    }

.category4 {
    background-image: url("https://drive.google.com/uc?export=download&id=1LAIxyXDgEhromN7v5loednVbX97UtlIB");
    }

.category5 {
    background-image: url("https://drive.google.com/uc?export=download&id=1Yxm4BQx36QbMNrq4Wox7ox5gR0u0yjfu");
    }

/*End of Category Images*/
.homepagecategorycontainer {
    overflow: hidden;
    background-color: #333333; 
    position: relative;
    }

.homepagecategorycontent {
    transform: skew(20deg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 33vw;
    height: 33vw;
    position: absolute;
    }

.homepagecategories:hover::after {
    animation: 0.2s ease-out 0s 1 afterbuttonhoverslide;
    animation-fill-mode: forwards;  
    }

.homepagecategories:hover {
    animation: 0.5s ease-out 0s 1 buttonhoverslide;
    animation-fill-mode: forwards;
    }

.homepagecategories:hover .homepagecategorycontent {
    animation: 0.5s ease-out 0s 1 buttonimageslide;
    animation-fill-mode: forwards;
    }

.homepagecategories:hover .categorytext {
    animation: 0.7s ease-out 0s 1 slightright;
    animation-fill-mode: forwards; 
    }

/* IDs */
#featuredproduct {
    position: relative;
    text-align: center;
    }
/*Animations*/
@keyframes slidein {
    0% {
        transform: translateX(-100%);
        opacity: 0%;
        }
    100% {
        transform: translateX(-20);
        opacity: 100%;
        }
    }

@keyframes slideappearance {
    0% {
        opacity: 0%;
        top: 77%;
        }
    100%{
        opacity: 100%;
        top: 75%;
        }
    }

@keyframes headerhide {
    0%  {
        top: 120px;
        }
    100% {
        top: -100%
        }
    }

@keyframes headershow {
    0%  {
        top: -100%;
        }
    100%{
        top: 120px;
        }
    }

@keyframes buttonhoverslide {
    0% {
        padding: 0;
        }
    100% {
        padding: 0 25 0 0;
        }
    }

@keyframes buttonimageslide {
    0% { 
        background-position: 0 0;
        }
    100% {
        background-position: -30 0;
        }
    }

@keyframes afterbuttonhoverslide {
    0% {
        padding: 0 25 0 0;
        }
    100% {
        padding: 0;
        }
    }

@keyframes floatandappear {
    0% {
        opacity: 0%;
        }
    100% {
        opacity: 100;
        transform: translateX();
        }
    }

@keyframes slightright {
    0% {
        top: 23%;
        left: 5px;
        }
    100% {
        top: 23%;
        left: 10px;
        }
    }
</style>
    <!-- Fixed Header -->
            <header>
                <div class="header" id="header">
                    <div>
                        <center>
                            <img class="mainicon" src="https://drive.google.com/uc?export=download&id=1blJIRZ7SCMqXqTPJ0REXchspxgWJ5k7t">
                        </center>
                    </div>
                    <center>
                        <div class="headerlinkwrapper">
                            <div class="headerbuttons">
                                <a class="headerbuttons" href="#">Test</a>
                            </div>
                            <div class="headerbuttons">
                                <a class="headerbuttons" href="#">Test</a>
                            </div><div class="headerbuttons">
                                <a class="headerbuttons" href="#">Test</a>
                            </div>
                        </div>
                    </center>
                    </div>
                </div>
                </header>
        <!--Featured Product Header -->
            <div id="toppage">
            </div>
        <!-- Featured Product Section -->
            <div id="featuredproduct">
                <img src="https://drive.google.com/uc?export=download&id=1_b_5r5jFu92jUrou8p9Y4GgTfaABG2Jq" width="100%">
        <!-- Product Name -->
                <div class="featuredproducttext">
                    Placeholder Keyboard
                </div>
        <!-- Brief Product Info -->
                <div class="featuredproductinfo">
                    Awesome, and even more awesome. 
                </div>
                <div class="featuredproductbutton">
                    <a href="#" class="button">Learn More</a>
                </div>
            </div>
            </div>
        <!-- Categories -->
            <div class="categorytop">
                <p class="categorytop">Categories</p>
            </div>
            <center>
                <div class="homepagecategorycontainer">
                <a href="#">
                    <div class="homepagecategories">
                        <div class="homepagecategorycontent category1">
                        </div>
                            <div class="categorytext">
                                Switches
                            </div>
                    </div>
                </a>
                <a href="#1">
                    <div class="homepagecategories">
                        <div class="homepagecategorycontent category2">
                        </div>
                            <div class="categorytext">
                                Keycaps
                            </div>
                    </div>
                </a>
                <a href="#2">
                    <div class="homepagecategories">
                        <div class="homepagecategorycontent category3">
                        </div>
                            <div class="categorytext">
                                Keyboards
                            </div>
                    </div>
                </a>
                <a href="#3">
                    <div class="homepagecategories">
                        <div class="homepagecategorycontent category4">
                        </div>
                            <div class="categorytext">
                                Group Buy
                            </div>
                    </div>
                </a>
                <a href="#4">
                    <div class="homepagecategories">
                        <div class="homepagecategorycontent category5">
                        </div>
                            <div class="categorytext">
                                Misc.
                            </div>
                    </div>
                </a>
            </div>
            </center>
        </body>

Hello, please, provide way to run your code, you can use a snippet on the editor, the icon is this: {} — Hoch, Aug 13 '21 at 13:54
I think you may misunderstand the English meanings here. `:after` is a *positional* and the `:hover` is an *event* , so while you want something to happen *chronologically after* a hover *event*, the CSS after is *positionally* after it. Suggestion: explore Javascript/JQuery — Martin, Aug 13 '21 at 13:55
For reference to others, here is the original post: https://stackoverflow.com/questions/68766260/css-psuedo-hoverafter-element-doesnt-work-as-intended — Martin, Aug 13 '21 at 13:57
Code is now run-able, sorry... I'm still not used to the bells and whistles of Stack Overflow. — DotMatrixProgrammer, Aug 13 '21 at 13:58
You cannot give any event listener such as `click`, `hover` to pseudo elements. — Abin Thaha, Aug 13 '21 at 13:59
@DotMatrixProgrammer It looks like [**THIS QUESTION**](https://stackoverflow.com/questions/18200228/how-to-make-smooth-css-transition) is exactly what you're looking for. Use CSS `Transitions`. — Martin, Aug 13 '21 at 14:01
Does this answer your question? [how to make smooth css transition](https://stackoverflow.com/questions/18200228/how-to-make-smooth-css-transition) — Martin, Aug 13 '21 at 14:02
@Martin , may you please explain in a form of an answer? I may be misunderstanding the code of the answer. — DotMatrixProgrammer, Aug 13 '21 at 14:08

score 0 · Accepted Answer · answered Aug 13 '21 at 14:07

0

You can use :hover css event on elements. ::after is not what you need.

You don't need an animation to do this.. you can set transition: xx to your button (not :hover) and when the button is hovered you can change the padding or resize it.

And remember that padding: 0 25 0 0; is not correct, you have to specify 25 what. For example 25px.

Here an example:

  button {
    transition: all .2s linear;
  }

  button:hover {
    padding: 0 25px 0 0;
  }

<button>Hello</button>

answered Aug 13 '21 at 14:07

Damiano Mazzara

61
4

Is it possible for me to apply it to all my other animations? The text, the background image? – DotMatrixProgrammer Aug 13 '21 at 14:22
Yes, when using transition: all xxxx; to an element, everytime you will edit something (color, size, margins) it will be done with the transition you specified! – Damiano Mazzara Aug 13 '21 at 14:31

CSS psuedo-elements :hover::after doesn't execute an animation

1 Answers1