web-dev-qa-db-fra.com

“Text-decoration” et le pseudo-élément “: after”, revisité

Je pose à nouveau cette question parce que ses réponses n'ont pas fonctionné dans mon cas.

Dans ma feuille de style pour les supports imprimés, je souhaite ajouter l'URL après chaque lien à l'aide de la pseudo-classe :after.

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

Dans Firefox (et probablement Chrome mais pas IE8), text-decoration: none est ignoré et le soulignement s'étend de manière peu attrayante au bas de l'URL. La color est toutefois correctement définie en noir pour l'URL. Existe-t-il un moyen de faire fonctionner le text-decoration?

La question originale ajoutait des images de taille fixe au lieu d'un texte de largeur variable. Ses réponses utilisent des images de remplissage et d'arrière-plan pour éviter d'avoir à utiliser la propriété text-decoration. Je cherche toujours une solution lorsque le contenu est du texte à largeur variable.

csscross-browserpseudo-element
44
palm3D

L'implémentation par IE8 des pseudo-éléments: before et: after est incorrecte. Firefox, Chrome et Safari l'implémentent tous selon la spécification CSS 2.1.

5.12.3 Les pseudo-éléments: before and: after

Le ': avant' et ': après' Les pseudo-éléments peuvent être utilisés pour insérercontenu généré avant ou après ancontenu de l'élément. Ils sont expliqués dans la section sur le texte généré.

...

Spécification de niveau 2 pour les feuilles de style en cascade - CSS 2.1

La spécification indique que le contenu doit être inséré avant ou après le contenu de l'élément}, pas l'élément (c'est-à-dire <élément> contenu: avant contenu contenu: après </ element>). Ainsi, dans Firefox et Chrome, la décoration de texte que vous rencontrez ne concerne pas le contenu inséré, mais plutôt l'élément d'ancrage parent qui contient le contenu inséré.

Je pense que vos options vont utiliser la technique d’arrière-plan-image/remplissage suggérée dans votre question précédente ou éventuellement encapsuler vos éléments d'ancrage dans des éléments span et appliquer les pseudo-éléments aux éléments span à la place.

22
MyItchyChin

Si vous utilisez display: inline-block sur le pseudo :after, la déclaration text-decoration fonctionnera.

Testé sous Chrome 25, Firefox 19

84
Elliott C

J'ai eu le même problème et ma solution était de régler height et 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;
}

Cela fonctionne sur IE, FF, Chrome.

9
julia

Au lieu de cela, vous pouvez utiliser une bordure inférieure plutôt qu'une décoration de texte ..___ Cela suppose que vous connaissiez la couleur de l'arrière-plan

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

La seule chose qui a fonctionné pour moi a été de déclarer un sélecteur répété distinct avec la même propriété de décoration de texte qu'il héritait de son parent, puis dans le sélecteur principal, en définissant la décoration de texte sur none.

Apparemment, IE ne sait pas quoi faire lorsque vous définissez text-decoration: none sur un pseudo-élément sans que cet élément ait la propriété text-decoration déclarée (qui, par défaut, n’a rien déclaré par défaut). Cela n'a pas beaucoup de sens car il est évidemment hérité du parent, mais hélas, nous avons maintenant des navigateurs modernes.

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
Robert Henderson

Je réalise que cela ne répond pas à la question que vous posez, mais y a-t-il une raison pour laquelle vous ne pouvez pas utiliser les éléments suivants (approche basée sur background):

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

Autant que je sache, l'implémentation de :after dans Firefox respecte la propriété de la classe du sélecteur, pas celle de la classe psuedo. Cela pourrait valoir la peine d’expérimenter différents doctypes? La transition, plutôt que stricte, permet parfois d’obtenir des résultats différents (même si ce n’est pas toujours meilleur résultats ...).

Modifier:

Il semble que l'utilisation de

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

remplace, ou du moins cache, le text-decoration. Cela ne fournit pas vraiment de réponse, mais offre au moins une solution de contournement.

1
David Thomas

Ce que je fais est que j'ajoute une étendue dans l'élément a, comme ceci:

<a href="http://foo.bar"><span>link text</span></a>

Puis dans votre fichier CSS:

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

a {
  text-decoration:none;
}

a span {
  text-decoration: underline;
}
1
Célia

Vous pouvez sélectionner automatiquement les liens vers les fichiers pdf en:

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

IE moins de 8 peut être activé pour fonctionner correctement en implémentant ce lien dans la tête du fichier HTML:

<!--[if lt IE 8]><script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script><![endif]-->

Cela fonctionne également très bien dans toutes les versions IE lorsque vous utilisez la fonction after-before-content-choses pour afficher les guillemets.

0
Helen

Salut, j'avais également des problèmes avec cela et suis tombé par hasard sur une solution de contournement.

Pour contourner le problème, j'ai enveloppé l'URL dans div et utilisé quelque chose comme ceci. 

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

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

1)

:after{
    position: absolute;
}

n'est pas parfait, car le contenu de l'élément ne sera pas bouclé

2)

:after{
    display: inline-block;
}

n’est pas parfait, car nous souhaitons parfois que le contenu soit toujours enveloppé du dernier mot du contenu de l’élément.

Pour l’instant, je ne trouvais pas de solution parfaite pour les 3 conditions (1. Le contenu pourrait s’envelopper automatiquement s’il était trop long 2.after le contenu devrait envelopper avec le contenu de l’élément, ce qui signifie qu’après le contenu ne devrait pas occuper seul. .text-decoration ne devrait s’appliquer que si la condition de l’élément ne s’applique pas après le contenu.) Pour le moment, j’utilise une autre méthode pour imiter la décoration du texte.

0
Ao Li

Positionnez le contenu absolument comme suit:

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

Cela fonctionne pour moi dans Firefox 3.6, mais n’a été testé dans aucun autre navigateur, bonne chance!

0
Daniel