webentwicklung-frage-antwort-db.com.de

„Textdekoration“ und das Pseudoelement „: after“, überarbeitet

Ich frage diese Frage , weil die Antworten in meinem Fall nicht funktionierten.

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

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

In Firefox (und wahrscheinlich Chrome, aber nicht IE8) wird text-decoration: none ignoriert und die Unterstreichung erstreckt sich unattraktiv über den unteren Rand der URL. Die color ist jedoch für die URL korrekt auf schwarz gesetzt. Gibt es eine Möglichkeit, den text-decoration zum Laufen zu bringen?

Die ursprüngliche Frage Bilder mit fester Größe wurden anstelle von Text mit variabler Breite angehängt. In den Antworten werden Füllungen und Hintergrundbilder verwendet, um zu vermeiden, dass die Eigenschaft Textdekoration verwendet werden muss. Ich bin immer noch auf der Suche nach einer Lösung, wenn der Inhalt Text mit variabler Breite ist.

44
palm3D

Die Implementierung von: before und: after Pseudo-Elementen durch IE8 ist falsch. Firefox, Chrome und Safari implementieren dies gemäß der CSS 2.1-Spezifikation.

5.12.3 Das: vor und: nach Pseudoelementen

Die Pseudoelemente ": before" und "after" Können verwendet werden, um EinfügungGenerierter Inhalt vor oder nach einemElementinhalt. Sie werden im Abschnitt "Generierter Text" erläutert.

...

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

Die Spezifikation gibt an, dass der Inhalt vor oder nach dem Elementinhalt} eingefügt werden soll, nicht dem Element (dh <Element> content: before content content : after </ element>). In Firefox und Chrome befindet sich die Textdekoration, auf die Sie treffen, 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 Hintergrund-Bild-/Auffülltechnik sein oder möglicherweise die Ankerelemente in Spannelemente einschließen und stattdessen die Pseudoelemente auf die Spannelemente anwenden.

22
MyItchyChin

Wenn Sie display: inline-block für den :after-Pseudo verwenden, funktioniert die text-decoration-Deklaration.

Getestet in Chrome 25, Firefox 19

84
Elliott C

Ich hatte das gleiche Problem und meine Lösung bestand darin, die Höhe einzustellen und Überlauf: hidden

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.

9
julia

Alternativ können Sie anstelle einer Textdekoration einen unteren Rand 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 */
}
6
oluc

Das Einzige, was für mich funktionierte, war, einen separaten, wiederholten Selektor mit derselben Textdekorationseigenschaft zu deklarieren, den er von seinem übergeordneten Element erbte, und dann im Hauptselektor die Textdekoration auf keine setzen.

IE weiß anscheinend nicht, was zu tun ist, wenn Sie text-decoration: none für ein Pseudoelement festlegen, ohne dass für dieses Element die Textdekorationseigenschaft deklariert ist (für die standardmäßig keine Standarddekoration angegeben ist). Das macht wenig Sinn, da es offensichtlich von den Eltern vererbt 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.
}
3

Ich weiß, dass dies die Frage, die Sie stellen, nicht beantwortet, aber gibt es einen Grund, warum Sie Folgendes nicht verwenden können (background- basierter 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ß, beachtet die Firefox-Implementierung von :after die Eigenschaft der Klasse des Selektors, nicht die Pseudo-Klasse. Vielleicht lohnt es sich aber, mit verschiedenen Lehren zu experimentieren? Der Übergang erlaubt, anstatt streng, manchmal andere Ergebnisse (wenn auch nicht immer besser Ergebnisse ...).

Bearbeiten:

Es scheint, dass mit

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

überschreibt den text-decoration oder verbirgt ihn zumindest. Dies bietet zwar keine Antwort, bietet aber zumindest einen Workaround.

1
David Thomas

Was ich mache ist, ich füge eine Spanne innerhalb eines Elements hinzu, 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;
}
1
Célia

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

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

IE weniger als 8 kann für die ordnungsgemäße Funktion aktiviert werden, indem dieser Link im Kopf der HTML-Datei 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 allen IE -Versionen, wenn Sie das After-Before-Content-Ding zum Dosieren von Anführungszeichen verwenden.

0
Helen

Hallo, ich hatte auch Probleme damit und bin zufällig auf einen Workaround gestoßen.

Um das zu umgehen, habe ich die URL in div eingepackt und so etwas verwendet. 

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

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

1)

:after{
    position: absolute;
}

ist nicht perfekt, da der Elementinhalt nicht umgebrochen wird

2)

:after{
    display: inline-block;
}

ist nicht perfekt, denn manchmal wünschen wir, dass der Inhalt immer mit dem letzten Wort des Elementinhalts umbrochen wird.

Im Moment konnte ich keine perfekte Lösung finden, die alle 3 Bedingungen erfüllt (1. Inhalt könnte automatisch umwickeln, wenn er zu lang ist. 2. Nachdem der Inhalt mit Elementinhalt umbrochen werden soll, bedeutet dies, dass der Inhalt nicht von sich aus besetzt werden sollte. 3) .text-decoration sollte nur gelten, wenn die Elementbedingung nicht für after-inhalte gilt.) Ich denke, die Gedanken verwenden jetzt eine andere Möglichkeit, Textdekoration nachzuahmen.

0
Ao Li

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, wurde jedoch in keinem anderen Browser getestet. Viel Glück!

0
Daniel