How to make a hover effect for pseudo elements?

Question

I have a this setup:

<div id="button">Button</div>

and this for CSS:

#button {
    color: #fff;
    display: block;
    height: 25px;
    margin: 0 10px;
    padding: 10px;
    text-indent: 20px;
    width: 12%;
}

#button:before {
    background-color: blue;
    content: "";
    display: block;
    height: 25px;
    width: 25px;
}

Is there a way to give the pseudo element a hover effect such as #button:before:hover {...} and is it also possible to get the pseudo element to hover in response to another element being hovered like so: #button:hover #button:before {...}? CSS only would be nice, but also jQuery is fine too.

there is a way to hover one element and affect another(purely with css): http://stackoverflow.com/questions/1462360/css-hover-one-element-effect-for-multiple-elements my question relates to pseudo elements though — chasethesunnn, Jan 15 '12 at 23:49

score 115 · Accepted Answer · edited Dec 09 '15 at 10:05

115

You can change the pseudo-element based on hover of the parent:

JSFiddle DEMO

#button:before {
    background-color: blue;
    content: "";
    display: block;
    height: 25px;
    width: 25px;
}

#button:hover:before {
    background-color: red;
}

#button {    display: block;
    height: 25px;
    margin: 0 10px;
    padding: 10px;
    text-indent: 20px;
    width: 12%;}

#button:before { background-color: blue;
    content: "";
    display: block;
    height: 25px;
    width: 25px;}

#button:hover:before { background-color: red;}

<div id="button">Button</div>

edited Dec 09 '15 at 10:05

Shahzad Barkati

2,532
6
25
33

answered Jan 15 '12 at 23:52

James Montagne

77,516
14
110
130

1

Note - `:before` would require IE8+. – jfriend00 Jan 15 '12 at 23:57
4

True, left that out since the question was specifically about `:before`. – James Montagne Jan 15 '12 at 23:57
5

Won't that hover then be applied to the button and not the pseudo-element `:before`? I mean, if you want the pseudo element to change when only the pseudo element is hovered, but not when the rest of the button is hovered? – jgivoni Mar 28 '13 at 10:10
6

@jgivoni This will apply to either the element or the before. You can't apply a hover to just the pseudo element. – James Montagne Mar 28 '13 at 13:48
9

this answer is wrong, as it is not possible to give :hover to pseudo elements, here you are giving the :hover to the parent element which was not the question tbh – Maximilian Köhler Nov 26 '17 at 08:00
@MaximilianKöhler If you run the demo you will see it applies the hover effects to the before element, they just only happen *on* hover of the parent (which is how hover works). – TylerH Sep 05 '18 at 20:54
@James Montagne Can you check this and suggests to me how can I achieve it. https://stackoverflow.com/questions/66923436/on-hover-after-element-move-to-current-div – Husna Apr 03 '21 at 18:38

score 38 · Answer 2 · answered Sep 05 '18 at 20:34

38

To clarify, you CAN NOT give :hover to a pseudo element. There's no such thing as ::after:hover in CSS as of 2018.

answered Sep 05 '18 at 20:34

Unai Yécora

571
1
6
10

score 11 · Answer 3 · answered Jan 15 '12 at 23:57

#button:hover:before will change the pseudo-element in response to the button being hovered. If you want to do anything nontrivial to the pseudo-element only, however, you'd be better off putting an actual element into your HTML. Pseudo-elements are rather limited.

While CSS won't let you style elements based on elements that come after them, it is usually possible to rig something with the same basic effect by putting :hover on a parent node, i.e.:

<div id="overbutton">
    <div id="buttonbefore"></div>
    <div id="button"></div>
</div>

#overbutton {
    margin-top: 25px;
    position: relative;
}

#buttonbefore {
    position: absolute;
    background-color: blue;
    width: 25px;
    height: 25px;
    top: -25px;
}

#overbutton:hover #buttonbefore {
    // set styles that should apply to buttonbefore on button hover
}

#overbutton:hover #buttonbefore:hover {
    // unset styles that should apply on button hover
    // set styles that should apply to buttonbefore on buttonbefore hover
}

score 0 · Answer 4 · answered Dec 29 '14 at 18:32

If its just for design purposes I think its better to create Pseudo-Elements on either side of the Rectangle Box and to keep the HTML as simple as possible:

HTML:

 <body>
    <div class="tabStyle">Rectangle</div>
    </body>

CSS:

 .tabStyle {
        border-style:solid;
        border-color: #D8D8D8;
        background : #D8D8D8;
        width:200px;
        height:93px;
        color: #000;
        position: relative;
        top: 10px;
        left: 49px;
        text-align:center;
    }
    .tabStyle:hover {
        background : #000;
        border-color: #000;
    }
    .tabStyle:hover::before {
        border-color: transparent #000 #000 transparent;
        border-style: solid;
        border-width: 0px 0px 100px 50px;
    }
    .tabStyle:hover::after {
        border-color: transparent transparent #000 #000;
        border-style: solid;
        border-width: 0px 50px 100px 0px;
    }
    .tabStyle::after {
        border-color: transparent transparent #D8D8D8 #D8D8D8;
        border-style: solid;
        border-width: 0px 50px 100px 0px;
        position: absolute;
        top: -4px;
        left:101%;
        content:"";
    }
    .tabStyle::before {
        border-color: transparent #D8D8D8 #D8D8D8 transparent;
        border-style: solid;
        border-width: 0px 0px 100px 50px;
        position: absolute;
        top: -4px;
        right: 101%;
        content:"";
    }

I've modified the CSS and the result can be seen below:

http://jsfiddle.net/a3ehz5vu/

How to make a hover effect for pseudo elements?

4 Answers4

Linked

Related