“Text-decoration” e il “: dopo” pseudo-elemento, rivisitato

Question

Sono ri-chiedendo href="https://stackoverflow.com/questions/1180910/text-decoration-and-the-after-pseudo-element"> questa domanda perché le sue risposte non ha funzionato nel mio caso.

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.

Answer 1

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è contenuto: prima contenuto contenuto: dopo ). Così in Firefox e Chrome il text-decoration si sta incontrando non è sul contenuto inserito, ma piuttosto sul elemento di ancoraggio principale che contiene il contenuto inserito.

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.

Answer 2

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

Testato in Chrome 25, Firefox 19

Answer 3

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

Si lavora su IE, FF, Chrome.

Answer 4

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 */
}

Answer 5

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

Answer 6

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

Answer 7

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.

Answer 8

È 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.

Answer 9

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 10

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: ')';
}

Answer 11

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.