0

I am working with "after" pseudo elements' content-property to add divider between my footer-links. 

.link::after {
    content: " | ";
}

On iOS the the whole element including it's after-pseudo-element gets highlighted. This behaviour is unwanted - I would like the after-content not to get highlighted when its parent element (the "real" element) is active.

Here's a screenshot of an clicked link on an iOS device

Setting the tap-highlight-color-property separately for the after-element doesn't seem to have any effect.

jsfiddle representing this problem

Is there any css-way that can solve this problem or do I have to change the non-css code to make the divider not get highlighted?

mariusb
  • 3
  • 3
  • problem solved wrapping the links, placing the divider-pseudo-element on the wrap's ... while keeping the tap-highlight-color on the link itself. https://jsfiddle.net/odqcj6e8/5/ – mariusb Mar 16 '17 at 13:03

1 Answers1

0

Try using these two:

.link,
.link::after {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
}

A few more SO answers and links are here.

Community
  • 1
  • 1
Ted Goas
  • 7,051
  • 1
  • 35
  • 42