"Textdekoration" und das ": After" -Pseudoelement, das überarbeitet wurde
-
11-09-2019 - |
Frage
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.
Lösung
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.
Andere Tipps
Wenn du benutzt display: inline-block
auf der :after
Pseudo, die text-decoration
Erklärung wird funktionieren.
Getestet in Chrome 25, Firefox 19
Ich hatte das gleiche Problem und meine Lösung bestand darin, die Höhe zu setzen und Überlauf versteckt
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.
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 */
}
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.
}
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;
}
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.
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.
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!
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: ')';
}
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.