So entfernen Sie eine Unterstreichung auf einer pseudo-element?

Auf Chrome und Firefox, wenn ich eine text-Dekoration:unterstreichen Sie auf eine Markierung, standardmäßig der Unterstrich gilt nicht für das pseudo-element.
Aber auf IE ist es nicht, und ich kann nicht entfernen Sie es.
Ich möchte den link hier hervorgehoben werden, aber nicht die pseudo-element.

Es funktionieren, wenn ich einen span im inneren und setzen Sie die Unterstreichung auf, aber ich möchte wissen, ob es gemacht werden kann, ohne zusätzliches markup.

CSS:

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;
}

HTML:

<a href="#" id="underline">underline</a>
<br>
<a href="#" id="color">color</a>
<br>
<a href="#" id="span"><span>with span</span></a>

InformationsquelleAutor DocFrag | 2014-11-19
  1. 27

    Scheint es, dass der IE nicht lassen überschreiben Sie die text-decoration im pseudoelement, wenn er nicht in Sie.
    Lassen Sie uns zunächst die pseudo-Elemente werden Unterstrichen text-decoration: underline - und danach überschreiben Sie diese mit textdecoration: none.

    CSS:

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

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

    • Dickes Lob an Sie. Dies ist die einzige Lösung, die richtige ist. Sie benötigen zum Bearbeiten Ihrer Antwort obwohl. Es ist text-Dekoration: unterstreichen (nicht Unterstrichen). Vielen Dank, das war eine komplette Kopfschmerzen. Typisch IE.
    • Das funktioniert aber nicht für mich arbeiten, weil, wenn der minifying von CSS, es entfernt die ersten Stil. Die Lösung war, fügen Sie eine weitere Klasse, die ein tag und dann setzen text-decoration: none auf.
    InformationsquelleAutor Ina
  2. 1

    Als text-decoration: underline; können nicht überschrieben werden, im IE, die Sie verwenden konnten border-bottom: 1px solid green; statt. Diese können dann überschrieben werden, auf der :before durch einstellen der Rahmenfarbe auf die Hintergrundfarbe (in diesem Fall weiß). Dies funktioniert nur auf einfarbigen Hintergründen obwohl.

    CSS:

    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;
}

    HTML:

    <a href="#" id="underline">Hover to check underline</a>

    InformationsquelleAutor Hidden Hobbes
  3. 0

    können Sie fügen Sie diese, um Ihren css. das half mir im IE

    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;}
    InformationsquelleAutor bernte
Schreibe einen Kommentar