CSS: nach Inhalt nicht

unterstrichen Um die Links in der Navigation zu trennen ich gesetzt haben folgendeCSS: nach Inhalt nicht

#menu-main li a:after{ 
    content: " * "; 
}

Das aktuelle Element wird zusätzlich

text-decoration: underline;

mein Problem ist jetzt, dass die "*" ist auch unterstrichen, sollte aber nicht

ich habe versucht,

#menu-main li a:after{ 
    text-decoration: none !important; 
}

hinzufügen

aber es hat keine Wirkung

Hat jemand eine Idee, wie man den Text unterstrichen hält, aber nicht den: nach Inhalt?

Quelle

2012-10-03 oliverspies

Im normalen Ablauf erweitert das Pseudoelement die Dimensionen des Elements, und was Sie sehen, ist die Unterstreichung der Unterstreichung der Verknüpfung. Fügen Sie a:after {text-decoration: line-through;} hinzu, um zu überprüfen.

Hier ist eine vorgeschlagene Lösung: http://jsfiddle.net/Ronny/Smr38/

Grundsätzlich, wenn position: absolute für die Pseudo-Elemente unter Verwendung sie nicht mehr die Dimensionen ihrer Mutterelemente beeinflussen, so dass die Unterstreichungen an der richtigen Stelle geschnitten werden. Sie müssen immer noch auf Dinge wie Zeigerereignisse, Hover-Status und Fokusringe achten, aber ich habe zumindest Letzteres gelassen, damit Sie es herausfinden können.

Quelle

2012-10-03 13:19:05 Ronny

das funktioniert perfekt für mich; danke – oliverspies

Das funktioniert in Chrom, aber nicht in IE (sogar 10). – Puzbie

wenn Sie die Kontrolle über Markup sind, können Sie eine Spanne in Ihrem Link der :after Pseudoelement gewonnen injiziert in

<a href="..."><span>your link</span></a>

und verwenden diese css

a { text-decoration: none } 
a span { text-decoration: underline }

so tun, den Inhalt einfügen könnte 't unterstrichen sein

Andernfalls können Sie den Stil auf li:after (wenn es möglich ist) wie

anwenden

Quelle

2012-10-03 12:49:48 fcalderan

Das Hinzufügen von Markup zur Unterstützung beim Styling sollte vermieden werden. Das Anwenden der Pseudoklasse auf das Listenelement ist eine Verbesserung, aber wieder dreht es sich mit der Semantik um des Stylings willen. – daddywoodland

Wie kann ein Pseudoelement die Semantik beeinflussen? Das OP hat das '*' bereits in ein anderes Pseudoelement eingefügt, so dass die ursprüngliche Semantik erhalten bleibt. – fcalderan

Angemessen, das Hinzufügen des Sterns zum Listenelement hat keinen Einfluss auf die Semantik. Natürlich fügt das Hinzufügen einer Spanne zur Unterstützung des Stylings hinzu. – daddywoodland

Es ist eine alte Frage, aber es ist, was Sie mit Google finden, also dachte ich, ich würde meine Lösung teilen, wenn Sie das Pseudo-Element zur Größe des "Elternteils" beitragen müssen und absolute Positionierung ist keine Option für aus irgendeinem Grund:

#menu-main li a:after{ 
    content: " * "; 
    display:inline-block; /* So we can set a width */ 
    width: 0; 
    margin-left: 10px; /* "Size" of the Pseudo-element */ 
}

Da die Breite 0, macht es keinen text-decoration angezeigt werden soll. Dies beinhaltet auch weniger Code und weniger Abhängigkeiten zwischen Ihren Stilen verglichen mit der akzeptierten Antwort.

Quelle

2015-07-13 09:43:40 Anpan

In meinem Fall brauche ich nicht einmal die Breite, es funktioniert nur Inline-Block hinzufügen.

Quelle

2015-08-25 12:06:36

Antwort

Verwandte Themen