“Text-decoration” e il “: dopo” pseudo-elemento, rivisitato
-
11-09-2019 - |
Domanda
Nel mio foglio di stile per i media stampati voglio aggiungere l'URL dopo ogni collegamento mediante il :after
pseudo-classe.
a:after {
content: " <" attr(href) ">";
text-decoration: none;
color: #000000;
}
In Firefox (e probabilmente Chrome, ma non IE8), text-decoration: none
viene ignorato, e la sottolineatura estende unattractively nella parte inferiore l'url. Il color
però è impostato correttamente a nero per l'URL. C'è un modo per far funzionare il text-decoration
?
Il domanda originale immagini di dimensioni fisse allegate invece di larghezza variabile testo. Le sue risposte utilizzano imbottitura e immagini di sfondo per evitare di dover utilizzare la proprietà text-decoration. Sto ancora cercando una soluzione quando il contenuto è il testo larghezza variabile.
Soluzione
L'implementazione di IE8 della: before e: after pseudo-elementi non è corretto. Firefox, Chrome e Safari tutto implementarlo in base alle specifiche CSS 2.1.
5.12.3 L': before e: after pseudo-elementi
Il ': prima' e ': dopo' pseudo-elementi possono essere utilizzati per inserto contenuto generato prima o dopo un contenuto dell'elemento . Essi sono spiegati nella sezione relativa testo generato.
...
Cascading Style Sheets Level 2 Revisione 1 (CSS 2.1) Specifica
La specifica indica che il contenuto deve essere inserito prima o dopo contenuto dell'elemento , non l'elemento (cioè
Credo che le opzioni stanno per essere con la tecnica background-image / imbottitura suggerito nella tua domanda precedente o, eventualmente, avvolgendo gli elementi di ancoraggio in elementi span e applicando gli pseudo-elementi agli elementi span invece.
Altri suggerimenti
Se si utilizza display: inline-block
sulla pseudo :after
, la dichiarazione text-decoration
funzionerà.
Testato in Chrome 25, Firefox 19
Ho avuto lo stesso problema e la mia soluzione era quella di impostare l'altezza e overflow: hidden
a {
text-decoration: underline;
}
a:after {
content: "»";
display: inline-block;
text-decoration: none;
height:16px;
overflow: hidden;
padding-left: 10px;
}
Si lavora su IE, FF, Chrome.
In alternativa, è possibile utilizzare un bordo inferiore, piuttosto che un text-decoration. Ciò presuppone che si conosce il colore dello sfondo
a {
text-decoration: none;
border-bottom: 1px solid blue;
}
a:after {
content: "foo";
border-bottom: 1px solid white; /* same color as the background */
}
L'unica cosa che ha funzionato per me stava dichiarando un selettore ripetuto separata con la stessa proprietà text-decoration che è stato ereditato dal suo genitore, quindi nel selettore principale, l'impostazione text-decoration a nessuno.
IE a quanto pare non sa cosa fare quando si imposta text-decoration: none
su un elemento pseudo senza quel elemento avente la proprietà text-decoration dichiarato (che di default, non ha nulla dichiarata per impostazione predefinita). Questo ha poco senso, perché è ovviamente viene ereditato dal genitore, ma ahimè, ora abbiamo i browser moderni.
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.
}
quello che faccio è aggiungo un arco all'interno di un elemento, in questo modo:
<a href="http://foo.bar"><span>link text</span></a>
Poi, nel tuo file CSS:
a::after{
content:" <" attr(href) "> ";
color: #000000;
}
a {
text-decoration:none;
}
a span {
text-decoration: underline;
}
Mi rendo conto che questo non risponde alla domanda che stai chiedendo, ma c'è una ragione per cui non è possibile utilizzare il seguente (approccio background
-based):
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 */
}
Per quanto ne so, l'implementazione di Firefox del :after
osserva la proprietà della classe del selettore, non il pseudo-codice categoria. Potrebbe valere la pena sperimentare con differenti DOCTYPE, però? La transizione, piuttosto che rigorosa, a volte consente di ottenere risultati diversi (anche se non sempre migliore risultati ...).
Modifica:
Sembra che l'utilizzo di
a:after {
content: " <" attr(href) ">";
text-decoration: none;
color: #000000;
background-color: #fff; /* or whatever colour you prefer */
}
sostituzioni, o almeno pelli, la text-decoration
. Questo in realtà non fornisce alcun tipo di risposta, ma almeno offre una soluzione di sorta.
È possibile autoselect collegamenti a file pdf per:
a[href$=".pdf"]:after { content: ... }
IE meno di 8 può essere abilitato per funzionare correttamente mediante l'attuazione di questo link nella testa del file HTML:
<!--[if lt IE 8]><script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script><![endif]-->
Funziona anche molto buono nelle versioni al IE quando si utilizza il dopo-prima-content-cosa per dosplaying virgolette.
Posizionare il contenuto assolutamente come segue:
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;
}
Questo funziona per me in Firefox 3.6, non testato in qualsiasi altro browser, però, buona fortuna!
Ciao sono stato anche avendo difficoltà con questo così e mi è capitato di imbattersi in una soluzione.
Per aggirare l'ostacolo, ho avvolto l'URL in div e usato qualcosa di simile.
.next_page:before {
content: '(';
}
.next_page:after {
content: ')';
}
1)
:after{
position: absolute;
}
non è perfetto, perché il contenuto elemento non avvolgere
2)
:after{
display: inline-block;
}
non è perfetto, perché a volte vogliamo dopo il contenuto deve sempre avvolgere con ultima parola del contenuto dell'elemento.
Per il momento, non ho trovato trovare una soluzione perfetta si adatta a tutte le condizioni di 3 (1 contenuto. Potrebbe auto-avvolgere se il suo contenuto troppo lungo 2.after dovrebbe avvolgere con contenuto di elementi, il che significa che dopo il contenuto non dovrebbe occupare singolo da esso auto. 3.text-decorazione dovrebbe applicarsi solo a condizione elemento si applica a dopo il contenuto.) I pensieri per ora sta usando altro modo per imitare text-decoration.