Wie entferne ich nur Unterstreichungen von a: vor?

94

Ich habe eine Reihe von gestalteten Links, mit denen :beforeein Pfeil angewendet wird.

Es sieht in allen Browsern gut aus, aber wenn ich die Unterstreichung auf den Link anwende, möchte ich keine Unterstreichung auf dem :beforeTeil (dem Pfeil) haben.

Siehe jsfiddle zum Beispiel: http://jsfiddle.net/r42e5/1/

Ist es möglich, dies zu entfernen? Der Teststil, mit dem ich gesessen #test p a:hover:beforehabe, wird zwar angewendet (laut Firebug), aber die Unterstreichung ist immer noch da.

Wie kann man das vermeiden?

#test {
  color: #B2B2B2;
}

#test p a {
  color: #B2B2B2;
  text-decoration: none;
}

#test p a:hover {
  text-decoration: underline;
}

#test p a:before {
  color: #B2B2B2;
  content: "► ";
  text-decoration: none;
}

#test p a:hover:before {
  text-decoration: none;
}

<div id="test">
  <p><a href="#">A link</a></p>
  <p><a href="#">Another link</a></p>
</div>

Erweitern Sie das Snippet

html css hyperlink pseudo-element text-decorations OptimusCrime
quelle

Nun, Sie möchten offensichtlich eine Liste ... Verwenden Sie ein UL-Element anstelle der DIV / P-Kombination. Mit Listen erhalten Sie die Kugeln (oder Scheiben, ...) kostenlos ...

Šime Vidas

Warum sollten Sie in Ihrem Fall keine Liste mit benutzerdefinierten Aufzählungszeichen anstelle von Absätzen verwenden? Andernfalls wenden Sie den Vorinhalt auf das übergeordnete p an, um sich nicht selbst zu verknüpfen.

YuS

Mögliches Duplikat von stackoverflow.com/questions/8536015/…

Oriol

171

Ist es möglich, dies zu entfernen?

Ja, wenn Sie den Anzeigestil des Inline-Elements von display:inline(Standardeinstellung) in Folgendes ändern display:inline-block:

#test p a:before {
    color: #B2B2B2;
    content: "► ";
    display:inline-block;
}

Dies liegt daran, dass in den CSS-Spezifikationen Folgendes angegeben ist :

Wenn es für ein Inline-Element angegeben oder an dieses weitergegeben wird, wirkt es sich auf alle von diesem Element generierten Boxen aus und wird weiter an alle In-Flow-Boxen auf Blockebene weitergegeben, die die Inline aufteilen (siehe Abschnitt 9.2.1.1). […] Für alle anderen Elemente wird es an alle in-flow-Kinder weitergegeben. Beachten Sie, dass Textdekorationen weder an schwebende und absolut positionierte Nachkommen noch an den Inhalt atomarer Nachkommen auf Inline-Ebene wie Inline-Blöcke und Inline-Tabellen weitergegeben werden .

(Hervorhebung von mir.)

Demo: http://jsfiddle.net/r42e5/10/

_{Vielen Dank an @Oriol für die Bereitstellung der Problemumgehung, die mich dazu veranlasst hat, die technischen Daten zu überprüfen und festzustellen, ob die Problemumgehung legal ist.}

Phrogz
quelle

2

Sie können ein text-decoration:underlineauf ein übergeordnetes Element angewendetes Element mit überschreiben display:inline-block. Siehe ein Beispiel: jsfiddle.net/aZdhN/1 . Dann kann das Problem des Fragestellers wie folgt

Oriol

3

Soweit ich sehen kann, funktioniert dies nicht in Internet Explorer (getestet 8-10). Irgendwelche Ideen, wie man mit IE umgeht?

Linus Caldwell

Ich habe eine Lösung gefunden, die auch in IE8-11 funktioniert: stackoverflow.com/a/21902566/1607968

LeJared

52

Es gibt einen Fehler in IE8-11 , daher funktioniert die display:inline-block;alleinige Verwendung dort nicht.

Ich habe eine Lösung für diesen Fehler gefunden, indem ich explizit den Wert text-decoration:underline;: before-content festgelegt und diese Regel dann erneut mit überschrieben habetext-decoration:none;

a {text-decoration:none;}
a:hover {text-decoration:underline;}
a:before {content:'>\a0'; text-decoration:underline; display:inline-block;}
a:before,
a:hover:before {text-decoration:none;}

Arbeitsbeispiel hier: http://jsfiddle.net/95C2M/

Update: Da jsfiddle nicht mehr mit IE8 funktioniert, fügen Sie diesen einfachen Demo-Code einfach in eine lokale HTML-Datei ein und öffnen Sie ihn in IE8:

<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <style type="text/css">
        a {text-decoration:none;}
        a:hover {text-decoration:underline;}
        a:before {content:'>\a0'; text-decoration:underline; display:inline-block;}
        a:before,
        a:hover:before {text-decoration:none;}
    </style>
</head>
<body>
    <a href="#">Testlink</a> With no Underline on hover under before-content
</body>
</html>

LeJared
quelle

Hätte ein Fall, in dem IE8 ein Hyperlink-Bild unterstreicht, könnte es nur von <img style="text-decoration:underline">innen ausgeschaltet werden (und hier war der Schlüssel)<a style="padding:0; border:none;">

Bob Stein

Leider kann jsfiddle in IE8 nicht überprüft werden, da jsfiddle in IE8 nicht funktioniert.

user2867288

Leider konnte ich kein Online-Code-Sharing-Tool finden, das noch mit IE8 funktioniert. Ich habe der obigen Antwort einen Code hinzugefügt, den Sie einfach in eine HTML-Datei einfügen und lokal in IE8 öffnen können.

LeJared

Getestet und genehmigt auf IE9, Ereignis ohne zwei verschiedene Zustände.

Saeraphin

Hatte einen Link mit einem Symbol in: vorher sollte das NICHT im Ruhezustand unterstrichen sein, dann beim Hover unterstrichen werden, aber nicht das Symbol. Folgendes musste ich tun, um den IE davon zu überzeugen, dies richtig zu machen: a {Textdekoration: keine} a: vor {Textdekoration: unterstreichen} a: vor {Textdekoration: keine} (ja wirklich, erste Unterstreichung, dann mit keiner überschreiben) a: hover {text-decration: underline} a: hover: before {text-decoration: none}

Fake Haak

7

Sie können dem :beforeElement Folgendes hinzufügen :

display: inline-block;
white-space: pre-wrap;

Mit display: inline-blockder Unterstreichung verschwindet. Das Problem ist jedoch, dass der Raum nach dem Dreieck zusammenbricht und nicht angezeigt wird. Um dies zu beheben, können Sie white-space: pre-wrapoder verwenden white-space: pre.

Demo : http://jsfiddle.net/r42e5/9/

Oriol
quelle

1

+1 für den pre-wrapHinweis. Ich benutzte content:'►\a0'(\ a0 = & nbsp;)

Hashbrown

1

Wickeln Sie Ihre Links in Bereiche ein und fügen Sie die Textdekoration dem Bereich auf dem a: Schwebeflug wie folgt hinzu:

a:hover span {
   text-decoration:underline;
}

Ich habe Ihre Geige auf das aktualisiert, was Sie meiner Meinung nach versuchen zu tun. http://jsfiddle.net/r42e5/4/

Euter
quelle

Gute Idee. So habe ich es vorher gemacht. Das Problem ist, dass dieser Link in einem CMS-System erstellt wird und unsere Kunden diesen selbst als Rich-Text ausfüllen.

OptimusCrime

Welche Sprache ist das CMS? Könnte es dazu führen, dass der Link ausgespuckt und dann in eine Zeitspanne eingeschlossen wird, bevor er an den Browser gesendet wird?

Euter

Das Unternehmen verwendet modx. Ich denke, ich könnte das als letzten Ausweg tun, aber ich wollte das wirklich aufheben. Ich denke, es ist nicht möglich. Trotzdem danke.

OptimusCrime

-1

Versuchen Sie stattdessen:

#test p:before {
    color: #B2B2B2;
    content: "► ";
    text-decoration: none;
}

wird das reichen?

Elen
quelle

Ich habe möglicherweise Absätze in meinem Div, damit das nicht funktioniert. Gute Idee tho.

OptimusCrime

Interessant, wer -1 setzt, wenn die akzeptierte Antwort dasselbe, aber in unterschiedlicher Form vorschlägt ...

Elen

-4

benutze das

#test  p:before {
    color: #B2B2B2;
    content: "► ";

}

Bipin Chandra Tripathi
quelle

macht nichts. Die Textdekoration wird ignoriert.

OptimusCrime

Wie entferne ich nur Unterstreichungen von a: vor?

Antworten:

Demo: http://jsfiddle.net/r42e5/10/