"Textdekoration" und das ": After" -Pseudoelement, das überarbeitet wurde

Question

Ich bin erneut geöffnet diese Frage Weil seine Antworten in meinem Fall nicht funktionierten.

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

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

In Firefox (und wahrscheinlich Chrom, aber nicht IE8), text-decoration: none wird ignoriert und der Unterstrecken erstreckt sich unattraktiv über den Boden der URL. Das color Es ist jedoch korrekt auf Schwarz für die URL eingestellt. Gibt es eine Möglichkeit, das zu machen? text-decoration Arbeit?

Das Originalfrage Angehängte Bilder mit fester Größe anstelle von Text variabler Breite. Die Antworten verwenden Polster- und Hintergrundbilder, um nicht die Textablagerungseigenschaft zu verwenden. Ich suche immer noch nach einer Lösung, wenn der Inhalt variabler Text ist.

Answer 1

Die Implementierung von IE8 durch: vor und: Nach pseudoelementen ist falsch. Firefox, Chrome und Safari implementieren es alle gemäß der CSS 2.1 -Spezifikation.

5.12.3 the: vor und: nach pseudoelementen

Die ': vor' und ': Nach' Pseudo-Elemente können verwendet werden Einfügung generierte Inhalte vor oder nach einem Inhalt des Elements. Sie werden im Abschnitt über generierten Text erklärt.

...

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

Die Spezifikation zeigt an, dass der Inhalt vor oder nach dem Einfügen eingefügt werden sollte Der Inhalt des Elements, nicht das Element (dhu003Celement>Inhalt: Vorher Inhalt Inhalt: Nachu003C/element>). So befindet sich in Firefox und Chrom die Textdekoration, auf die Sie begegnen, 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 vorherige Frage vorgeschlagene Hintergrund-Image-/Polstertechnik verwenden oder möglicherweise Ihre Ankerelemente in Spannelemente einwickeln und stattdessen die Pseudoelemente auf die Spannelemente anwenden.

Answer 2

Wenn du benutzt display: inline-block auf der :after Pseudo, die text-decoration Erklärung wird funktionieren.

Getestet in Chrome 25, Firefox 19

Answer 3

Ich hatte das gleiche Problem und meine Lösung bestand darin, die Höhe zu setzen und Überlauf versteckt

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, FF, Chrome.

Answer 4

Alternative können Sie eher einen unteren Rand als eine Textdekoration verwenden. Dies setzt voraus, dass Sie die Farbe des Hintergrunds kennen

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

Answer 5

Das einzige, was für mich funktioniert hat, war, einen separaten wiederholten Selektor mit derselben textbezogenen Eigenschaft zu deklarieren, die es von seinem übergeordneten, dann im Hauptwähler erbte und die Textdekoration auf keine festlegte.

IE weiß anscheinend nicht, was zu tun ist, wenn Sie einstellen text-decoration: none Auf einem Pseudoelement ohne dieses Element, das die textdekorationsbezogene Eigenschaft erklärt hat (was standardmäßig nicht standardmäßig deklariert wurde). Dies 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 6

Was ich tue, ist eine Spannweite im A -Element wie folgt:

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

Dann in Ihrer CSS -Datei:

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

a {
  text-decoration:none;
}

a span {
  text-decoration: underline;
}

Answer 7

Mir ist klar, dass dies nicht die Frage beantwortet, die Sie stellen, aber gibt es einen Grund, warum Sie Folgendes nicht verwenden können (background-basierten Ansatz):

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 Selektorklasse, nicht die Psuedoklasse. Es könnte sich jedoch wert sein, mit verschiedenen DocTypes zu experimentieren? Der Übergang und nicht streng ermöglicht manchmal unterschiedliche Ergebnisse (wenn auch nicht immer besser Ergebnisse...).

Bearbeiten:

Es scheint, dass die Verwendung

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

überschreibt oder zumindest versteckt, die text-decoration. Dies bietet keine Antwort, bietet aber zumindest eine Art Problemumgehung.

Answer 8

Sie können Links zu PDF-Dateien automatisch auswählen.

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

IE weniger als 8 können aktiviert werden, indem dieser Link im Kopf des HTML-Dates implementiert wird:

<!--[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 Al-IE-Versionen, wenn Sie die Nachbeamten für Dosis-Anführungszeichen verwenden.

Answer 9

Positionieren Sie den 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;
}

Dies funktioniert für mich in Firefox 3.6, aber in keinem anderen Browser getestet, viel Glück!

Answer 10

Hallo, ich hatte auch Probleme damit und stolperte zufällig über eine Problemumgehung.

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

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

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

Answer 11

1)

:after{
    position: absolute;
}

ist nicht perfekt, da Elementinhalte nicht wickeln

2)

:after{
    display: inline-block;
}

ist nicht perfekt, denn manchmal wünschen wir uns, nachdem Inhalte immer mit dem letzten Wort des Elementinhalts umwickeln sollten.

Im Moment konnte ich keine perfekte Lösung finden, die für alle drei Bedingungen passt (1. Inhalt könnte automatisch umschreiben, wenn es zu lang ist. .Textdekoration sollte nur für Elementbedingungen gelten, die nicht nach Inhalt gilt.) Ich Gedanken verwenden vorerst andere Möglichkeiten, die Textablagerung nachzuahmen.