webkit-tap-highlight-color auf pseudo nach element

Question

Ich arbeite mit "nach" pseudo-elements 'content-property, um Trenner zwischen meinen Footer-Links hinzuzufügen.

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

Bei iOS wird das gesamte Element inklusive After-Pseudo-Element hervorgehoben. Dieses Verhalten ist unerwünscht - ich möchte, dass der Nach-Inhalt nicht hervorgehoben wird, wenn sein übergeordnetes Element (das "echte" Element) aktiv ist.

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

Einstellen der Stufen Highlight-Color-Eigenschaft separat für den After-Sales-Element scheint keine Wirkung zu haben.

jsfiddle representing this problem

Gibt es eine CSS-Wege, die dieses Problem lösen kann, oder muss ich die Nicht-CSS-Code ändern die Teiler machen nicht hervorgehoben werden?

Answer 1

versuchen, diese beiden mit:

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

Noch ein paar SO Antworten und Links here sind.