Remove :hover on :after elements

Question

I'm trying to remove the :hover behaviour in an :after pseudoselector for a link. But I think that it's not possible.

a {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  font-size: 12px;
  color: #666;
  text-decoration: none
}

a:after {
  content: "·";
  margin: 0 2px 0 6px
}

a:hover {
  text-decoration: underline
}

a:hover:after {
  text-decoration: none
}

<a href="#">test</a>
<a href="#">test</a>
<a href="#">test</a>

Checkout the JsFiddle.

Is it possible?

score 6 · Answer 1 · edited May 23 '17 at 11:53

6

The easiest way to handle this is to wrap a span around the text in each link:

<a href="#"><span>test</span></a>

On :hover only the span is given text-decoration: underline:

a:hover span {text-decoration: underline}

See: http://jsfiddle.net/thirtydot/3N9vs/27/

A similar older question: Cannot undo text-decoration for child-elements
Also relevant: CSS text-decoration property cannot be overridden by child element

edited May 23 '17 at 11:53

Community

1
1

answered Apr 12 '12 at 11:28

thirtydot

224,678
48
389
349

1

The propagation of text decorations mentioned in my answer applies to pseudo-elements as well, since the boxes they generate are children of the `a` element's box. Not too sure why Josh's solution works in Chrome and Firefox, though. – BoltClock Apr 12 '12 at 11:31

score 5 · Answer 2 · answered Apr 12 '12 at 11:13

5

You need to give the :after psuedo element position:absolute; and give it margin to shift it. Also the anchor requires display:inline-block; in order for the :after content to appear correctly.

See: http://jsfiddle.net/ECFBR/

answered Apr 12 '12 at 11:13

Josh Davenport-Smith

5,456
2
29
40

2

This doesn't make any difference in, for example, IE9. – thirtydot Apr 12 '12 at 11:17
You're right, seems to work in Chrome and Firefox but not IE. Maybe there isn't a totally CSS based solution to this problem – Josh Davenport-Smith Apr 12 '12 at 11:24
I don't think there is. I'm reminded of this previous question: http://stackoverflow.com/questions/5434819/cannot-undo-text-decoration-for-child-elements – thirtydot Apr 12 '12 at 11:25

Remove :hover on :after elements

2 Answers2

Linked