"text-decoration" und das ": after" Pseudo-Element, erneut besucht

Question

Ich frage this question, weil seine Antworten in meinem Fall nicht funktioniert haben.

In meinem Stylesheet für gedruckte Medien möchte ich die URL nach jedem Link mit der :after Pseudo-Klasse anhängen.

a:after { 
    content: " <" attr(href) ">"; 
    text-decoration: none; 
    color: #000000; 
} 

In Firefox (und wahrscheinlich Chrome aber nicht IE8), text-decoration: none ignoriert wird, und die unterstrichenen erstreckt sich über den Boden der URL unattraktiv. Die color ist jedoch korrekt für die URL auf schwarz festgelegt. Gibt es eine Möglichkeit, die text-decoration funktionieren zu lassen?

Die original question angefügten Bilder fester Größe anstelle von Text mit variabler Breite. Die Antworten verwenden Füll- und Hintergrundbilder, um die Eigenschaft text-decoration nicht verwenden zu müssen. Ich suche immer noch nach einer Lösung, wenn der Inhalt Text mit variabler Breite ist.

Answer 1

IE8 Implementierung der: vor und: nach Pseudo-Elemente ist falsch. Firefox, Chrome und Safari implementieren alles gemäß der CSS 2.1 Spezifikation.

5.12.3 Die: vor und: Nach dem pseudo-Elemente

Das ': vor' und ': Nach dem' pseudo-Elemente können vor erzeugten Inhalt Einsatz verwendet werden, oder nach einem Element Inhalt. Sie werden im Abschnitt über generierten Text erklärt .

...

Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification

Die Spezifikation gibt an, dass der Inhalt vor oder nach eingefügt sein sollte, den Inhalt des Elements, nicht das Element (d.h.<Element> Inhalt: vor Inhalt Inhalt: nach </Element >). In Firefox und Chrome liegt die Textdekoration also nicht auf dem eingefügten Inhalt, sondern auf dem übergeordneten Ankerelement, das den eingefügten Inhalt enthält.

Ich denke, Ihre Optionen werden die in Ihrer vorherigen Frage vorgeschlagene background-image/padding-Technik verwenden oder möglicherweise Ihre Ankerelemente in span-Elemente einschließen und die Pseudo-Elemente stattdessen auf die span-Elemente anwenden.

Answer 2

Ich weiß, das die Frage nicht beantwortet Sie fragt, aber gibt es einen Grund, warum Sie nicht den folgenden (background -basierte Ansatz) verwenden können:

a.file_pdf { 
background-image: url(images/pdf.png); 
background-position: center right; 
background-repeat: no-repeat; 
padding-right: 15px; /* or whatever size your .png image is plus a small margin */ 
} 

Soweit ich weiß, Die Firefox-Implementierung von :after beobachtet die Eigenschaft der Klasse des Selektors, nicht die Pseudo-Klasse. Es könnte sich jedoch lohnen, mit verschiedenen Doctypes zu experimentieren? Der Übergang, eher als streng, ermöglicht manchmal unterschiedliche Ergebnisse (wenn auch nicht immer bessere Ergebnisse ...).

Edit:

Es scheint, dass mit

a:after { 
    content: " <" attr(href) ">"; 
    text-decoration: none; 
    color: #000000; 
    background-color: #fff; /* or whatever colour you prefer */ 
} 

überschreibt, oder zumindest Häuten, die text-decoration. Dies bietet nicht wirklich irgendeine Antwort, aber bietet zumindest eine Art Workaround.

Answer 3

Sie können Links zu PDF-Dateien Autoselect von:

a[href$=".pdf"]:after { content: ... } 

IE weniger als 8 kann aktiviert werden, um richtig zu arbeiten, indem Sie diesen Link im Kopf der HTML-Datei Implementierung:

<!--[if lt IE 8]><script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script><![endif]--> 

Es funktioniert auch sehr gut in allen IE-Versionen, wenn Sie das After-Before-Content-Ding für die Wiedergabe von Anführungszeichen verwenden.

Answer 4

Position der Inhalt absolut wie folgt:

a { 
    position: relative; 
    margin: 0 .5em; 
    font-weight: bold; 
    color: #c00; 
} 
a:before, 
a:after { 
    position: absolute; 
    color: #000; 
} 
a:before { 
    content: '<'; 
    left: -.5em; 
} 
a:after { 
    content: '>'; 
    right: -.5em; 
} 

Das in Firefox 3.6 funktioniert für mich, nicht jedoch in allen anderen Browsern getestet, viel Glück!

Answer 5

Als Alternative können Sie einen unteren Rand anstelle einer Textdekoration verwenden. Dies setzt voraus, dass Sie die Farbe des Hintergrundes

a { 
    text-decoration: none; 
    border-bottom: 1px solid blue; 
} 
a:after { 
    content: "foo"; 
    border-bottom: 1px solid white; /* same color as the background */ 
} 

Answer 6

Hallo weiß, dass ich auch mit diesem als auch Probleme, war und zufällig auf dieses Problem zu umgehen stolpern.

Um es zu umgehen, wickelte ich die URL in Div und verwendet so etwas.

.next_page:before { 
    content: '('; 
} 

.next_page:after { 
    content: ')'; 
} 

Answer 7

Wenn Sie display: inline-block auf dem :after Pseudo verwenden, wird die text-decoration Erklärung arbeiten.

in Chrome Getestet 25, 19 Firefox

Answer 8

hatte ich das gleiche Problem und meine Lösung war Höhe und Überlauf zu setzen:

http://jsfiddle.net/r45L7/

a { 
    text-decoration: underline; 
} 

a:after { 
    content: "»"; 
    display: inline-block; 
    text-decoration: none; 
    height:16px; 
    overflow: hidden; 
    padding-left: 10px; 
} 

Es funktioniert auf IE versteckt, FF, Chrome.

Answer 9

Das einzige, was für mich funktionierte, war die Deklaration eines separaten wiederholten Selektors mit der gleichen Text-Deko-Eigenschaft, die er von seinem Elternteil geerbt hatte, und dann im Haupt-Selektor die Einstellung text-decoration auf keine.

IE scheint nicht zu wissen, was zu tun ist, wenn Sie text-decoration: none auf ein Pseudo-Element ohne dieses Element mit der Text-Deko-Eigenschaft deklariert (die standardmäßig standardmäßig deklariert hat). Das macht wenig Sinn, weil es offensichtlich vom Elternteil geerbt wird, aber leider haben wir moderne Browser.

span.my-text { 
    color: black; 
    font-size: 12px; 
    text-decoration: underline; 
} 

span.my-text:after { 
    text-decoration: underline; // Have to set text-decoration here so IE knows it can be overwritten below 
} 

span.my-text:after { 
    color: red; 
    text-decoration: none; // In the same repeated selector, we can now overwrite text-decoration in our pseudo element. 
} 

Answer 10

Was ich tue, ist ich eine Spanne innerhalb der ein Element hinzufügen, wie folgt aus:

<a href="http://foo.bar"><span>link text</span></a> 

dann in Ihre CSS-Datei:

a::after{ 
    content:" <" attr(href) "> "; 
    color: #000000; 
} 

a { 
    text-decoration:none; 
} 

a span { 
    text-decoration: underline; 
}