Combine :after with :hover

Question

I want to combine :after with :hover in CSS (or any other pseudo selector). I basically have a list and the item with the selected class has an arrow shape applied using :after. I want the same to be true for objects that are being hovered over but cant quite get it to work. Heres the code

#alertlist {
  list-style: none;
  width: 250px;
}

#alertlist li {
  padding: 5px 10px;
  border-bottom: 1px solid #e9e9e9;
  position: relative;
}

#alertlist li.selected,
#alertlist li:hover {
  color: #f0f0f0;
  background-color: #303030;
}

#alertlist li.selected:after {
  position: absolute;
  top: 0;
  right: -10px;
  bottom: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #303030;
  content: "";
}

<ul id="alertlist">
  <li>Alert 123</li>
  <li class="selected">Alert 123</li>
  <li>Alert 123</li>
</ul>

Short answer: `li:hover:after`. First the :hover on the element, followed by the :after. — Avatar, Jun 22 '23 at 14:13

score 296 · Accepted Answer · answered Nov 05 '12 at 14:22

296

Just append :after to your #alertlist li:hover selector the same way you do with your #alertlist li.selected selector:

#alertlist li.selected:after, #alertlist li:hover:after
{
    position:absolute;
    top: 0;
    right:-10px;
    bottom:0;

    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #303030;
    content: "";
}

answered Nov 05 '12 at 14:22

BoltClock

700,868
160
1,392
1,356

41

@Chris, what you you probably tried previously was `:after:hover` as opposed to `:hover:after`. This is what I did initially which frustratingly doesn't work – WickyNilliams Feb 03 '13 at 22:45
3

@WickyNilliams: That's by design (pseudo-elements vs pseudo-classes) - see http://stackoverflow.com/questions/5777210/how-to-write-hover-condition-for-abefore-and-aafter/5777334#5777334 – BoltClock Feb 04 '13 at 09:30
3

This doesn't seem to work for text-decoration in Chrome (v43) nor in FF (v38). – geoidesic May 28 '15 at 10:04
@geoidesic: Text decorations are a different issue altogether. They especially don't play well with absolute positioning. Nothing to do with pseudo-elements or the `:hover` pseudo-class. – BoltClock May 28 '15 at 10:06
@BoltClock I'm not using absolute positioning but while I can change the color of my :after content using the above selector syntax, I'm not able to change the text-decoration for the hover state of an :after element on a link. Otherwise text-decoration works just fine. – geoidesic May 28 '15 at 10:08
@geoidesic: You'll want to post a separate question. – BoltClock May 28 '15 at 10:09
@BoltClock Ok: http://stackoverflow.com/questions/30503765/combine-after-with-hover-for-text-decoration-of-a-font-icon – geoidesic May 28 '15 at 10:22
Isn't :hover:after semantically different from :after:hover? – aderchox May 24 '22 at 06:22
1

@aderchox: It is, which is why :after:hover either doesn't work, or works differently, depending on which year you're in or what browser version you're using (I haven't checked if generated pseudos can have pseudo-classes now, but I know that idea was revived not too long ago). – BoltClock May 24 '22 at 06:55

score 30 · Answer 2 · answered Dec 26 '13 at 20:58

30

in scss

&::after{
content: url(images/RelativeProjectsArr.png);
margin-left:30px;
}

&:hover{
    background-color:$turkiz;
    color:#e5e7ef;

    &::after{
    content: url(images/RelativeProjectsArrHover.png);
    }
}

answered Dec 26 '13 at 20:58

Erez Lieberman

1,893
23
31

1

anybody needing the css equivalent, this works also `.whateverselector:hover::after` – Arausi Daniel Apr 18 '22 at 09:50

Kishore Kumar · Answer 3 · 2012-11-05T15:41:54.807

8

 #alertlist li:hover:after,#alertlist li.selected:after
{
    position:absolute;
    top: 0;
    right:-10px;
    bottom:0;

    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #303030;
    content: "";
}

jsFiddle Link

edited Nov 05 '12 at 15:41

answered Nov 05 '12 at 14:27

Kishore Kumar

12,675
27
97
154

li:hover:afte add this at the same class as selected – Kishore Kumar Nov 05 '12 at 14:28

score 2 · Answer 4 · answered Jan 15 '22 at 17:12

2

cssSelector:hover::after,

cssSelector:hover::before

lets say we have a tag

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

answered Jan 15 '22 at 17:12

T.Praveen

49
4

Combine :after with :hover

4 Answers4

Linked

Related