Frage IE: Unterstreichung auf Pseudo-Element entfernen


Wenn ich in Chrome und Firefox eine Text-Deko-Unterstreichung auf ein Tag anwende, gilt die Unterstreichung standardmäßig nicht für das Pseudo-Element. Aber auf IE tut es, und ich kann es nicht entfernen. Ich möchte, dass der Link unterstrichen wird, aber nicht das Pseudoelement. Es funktioniert, wenn ich einen Bereich innerhalb hinzufügen und die Unterstreichung darauf, aber ich möchte wissen, ob es ohne zusätzliche Markup gemacht werden kann.

a{		
	padding-left: 9px;
	position:relative;
	display:inline-block;

}
a:before{
	content:'\203A\00a0';
	position:absolute;
	top:0;
	left:0;
	display: inline-block;
}

#underline{
	text-decoration: none;			
}
#underline:hover{
	text-decoration:underline;
}
/* special for IE */
#underline:hover:before
{
	text-decoration:none !important;	/* does nothing ! */
}

#color{
	color:green;
}
#color:hover{
	color:red;
}
#color:hover:before{
	color:green;	/* work ! */
}

#span{
	text-decoration: none;
}
#span:hover span{
	text-decoration: underline;
}
<a href="#" id="underline">underline</a>
<br>
<a href="#" id="color">color</a>
<br>
<a href="#" id="span"><span>with span</span></a>


9
2017-11-19 13:46


Ursprung


Antworten:


Es scheint, dass IE es nicht erlaubt, die Textdekoration im Pseudoelement zu überschreiben, wenn es nicht darin gesetzt ist. Lassen Sie zuerst das Pseudoelement unterstrichen - text-decoration: unterstreichen - und überschreiben Sie es anschließend mit textdecoration: none.

#underline:hover:before
{
	text-decoration:underline;
}

#underline:hover:before
{
	text-decoration:none;
}


19
2017-08-20 13:56



Wie text-decoration: underline; kann nicht in IE überschrieben werden, die Sie verwenden könnten border-bottom: 1px solid green; stattdessen. Dies kann dann auf dem :before indem Sie die Rahmenfarbe auf die Hintergrundfarbe (in diesem Fall Weiß) einstellen. Dies funktioniert jedoch nur mit einfarbigen Hintergründen.

a {		
  color: green;
  display: inline-block;
  padding-left: 9px;
  position: relative;
  text-decoration: none;
}
a:before {
  content: '\203A\00a0';
  display: inline-block;
  left: 0;
  position: absolute;
  top: 0;
}
a:hover {
  border-bottom: 1px solid green;
}
a:hover:before {
  border-bottom: 1px solid white;
}
<a href="#" id="underline">Hover to check underline</a>


1
2017-11-20 13:08



Sie können dies zu Ihrem CSS hinzufügen. das hat mir im IE geholfen

a {text-decoration:none;}
a:hover {text-decoration:underline;}
a:before,a:after { text-decoration:underline;}
a:before,a:after,
a:hover:before,a:hover:after {text-decoration:none;}

0
2017-10-16 11:25