"text-decoration" e lo pseudo-elemento ": after", rivisitato

Question

Sto ri-chiedendo this question perché le sue risposte non hanno funzionato nel mio caso.

Nel mio foglio di stile per i supporti stampati, desidero aggiungere l'URL dopo ogni collegamento utilizzando la pseudo-classe :after.

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

In Firefox (e probabilmente Chrome, ma non IE8), text-decoration: none viene ignorata, e la sottolineatura si estende unattractively nella parte inferiore l'url. Il color tuttavia è correttamente impostato su nero per l'url. C'è un modo per far funzionare lo text-decoration?

Il original question ha aggiunto immagini a dimensione fissa anziché testo a larghezza variabile. Le sue risposte usano padding e immagini di sfondo per evitare di dover usare la proprietà text-decoration. Sto ancora cercando una soluzione quando il contenuto è di testo a larghezza variabile.

Answer 1

L'implementazione di IE8 degli pseudo-elementi: before e: after non è corretta. Firefox, Chrome e Safari lo implementano secondo le specifiche CSS 2.1.

5.12.3 L': before e: after pseudo-elementi

L' ': prima' e ': dopo' pseudo-elementi possono essere usati per inserto contenuto generato prima oppure dopo un contenuto dell'elemento. Vengono spiegati nella sezione sul testo generato.

...

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

La specifica indica che il contenuto deve essere inserito prima o dopo contenuto dell'elemento, non l'elemento (cioè<elemento> contenuto: prima contenuto contenuto: dopo </elemento >). Pertanto in Firefox e Chrome la decorazione di testo che stai incontrando non si trova sul contenuto inserito, ma piuttosto sull'elemento di ancoraggio principale che contiene il contenuto inserito.

Penso che le vostre opzioni useranno la tecnica di riempimento immagine/immagine suggerita nella domanda precedente o eventualmente avvolgere gli elementi di ancoraggio in elementi di estensione e applicare gli pseudo-elementi agli elementi di estensione.

Answer 2

Mi rendo conto che non risponde alla domanda che stai chiedendo, ma c'è una ragione per cui non è possibile utilizzare il seguente (background approccio 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 di osserva la proprietà della classe del selettore, non della classe psuedo. Potrebbe valere la pena sperimentare con doctypi diversi, però? Il transitorio, piuttosto che il rigoroso, a volte consente risultati diversi (anche se non sempre migliori risultati ...).

Edit:

Sembra che l'utilizzo di

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

override, o almeno pelli, la text-decoration. Questo in realtà non fornisce alcun tipo di risposta, ma almeno offre una sorta di soluzione.

Answer 3

È 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 bene nelle versioni di IE quando si utilizza il contenuto di after-before-content per le virgolette di dosplaying.

Answer 4

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!

Answer 5

In alternativa, è possibile utilizzare un bordo inferiore anziché una decorazione testuale. questo 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 */ 
} 

Answer 6

Hi ero anche avendo difficoltà con questo così e mi è capitato di imbattersi in una soluzione.

Per aggirare il problema, ho spostato l'URL in div e utilizzato qualcosa di simile.

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

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

Answer 7

Se si utilizza display: inline-block sul :after pseudo, la dichiarazione text-decoration funzionerà.

Testato in Chrome 25, Firefox 19

Answer 8

Ho avuto lo stesso problema e la mia soluzione era quella di impostare l'altezza e overflow: 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; 
} 

Funziona su IE, FF, Chrome.

Answer 9

L'unica cosa che ha funzionato per me era dichiarare un selettore ripetuto separato con la stessa proprietà di decorazione del testo che stava ereditando dal suo genitore, quindi nel selettore principale, impostando la decorazione del testo su none.

IE a quanto pare non sa cosa fare quando si imposta text-decoration: none su uno pseudo elemento senza che l'elemento abbia la proprietà text-decoration dichiarata (che per impostazione predefinita non ha nulla dichiarato per impostazione predefinita). Questo ha poco senso perché è ovviamente 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. 
} 

Answer 10

quello che faccio è aggiungo un arco all'interno di un elemento, come questo:

<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; 
}