« Text-decoration » et « : après » pseudo-élément, revisité

Question

Je suis re-demander cette question parce que ses réponses ne fonctionnait pas dans mon cas.

Dans ma feuille de style pour les médias imprimés que je veux ajouter l'URL après chaque lien en utilisant 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 étend vilainement à travers le fond de l'url. Le color est toutefois correctement réglé au noir pour l'URL. Y at-il un moyen de faire le travail de text-decoration?

question initiale images de taille fixe annexées plutôt que de largeur variable texte. Ses réponses utilisent des images de rembourrage et de fond pour éviter d'avoir à utiliser la propriété text-decoration. Je cherche toujours une solution lorsque le contenu est un texte de largeur variable.

Answer 1

La mise en œuvre de IE8 du: avant et: après les pseudo-éléments est incorrect. Firefox, Chrome et Safari mettre en œuvre tout en fonction de la spécification CSS 2.1.

  

5.12.3 L': avant et: après éléments pseudo-

     

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

     

...

     

Cascading Style Sheets Niveau 2 Révision 1 (CSS 2.1) Spécification

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

Je pense que vos options vont utiliser la technique background-image / padding suggérez dans votre question précédente ou peut-être envelopper vos éléments d'ancrage dans les éléments de portée et l'application des pseudo-éléments aux éléments de portée au lieu.

Answer 2

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

Testé dans Chrome 25, Firefox 19

Answer 3

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

Il fonctionne sur IE, FF, Chrome.

Answer 4

Comme alternative, vous pouvez utiliser une bordure inférieure plutôt que d'une décoration de texte. Cela suppose que vous connaissez 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 */
}

Answer 5

La seule chose qui a fonctionné pour moi déclarais un sélecteur répété séparé avec la même propriété décoration de texte qu'il héritait de son parent, puis dans le sélecteur principal, la mise en text-decoration sans pareil.

IE ne sait apparemment pas quoi faire lorsque vous définissez text-decoration: none sur un élément pseudo sans cet élément ayant la propriété text-decoration déclarée (qui, par défaut, il n'a rien déclaré par défaut). Cela n'a guère de sens, car il est évidemment héritée 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.
}

Answer 6

Ce que je fais est que j'ajouter une durée à l'intérieur du un élément, comme ceci:

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

Ensuite, dans votre fichier CSS:

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

a {
  text-decoration:none;
}

a span {
  text-decoration: underline;
}

Answer 7

Je sais que cela ne répond pas à la question que vous posez, mais est-il une raison que 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 */
}

Pour autant que je sache, la mise en œuvre Firefox de :after observe la propriété de la classe du sélecteur, pas la classe psuedo. Il pourrait être intéressant d'expérimenter avec différentes doctypes, bien? La transition, plutôt que stricte, permet parfois des résultats différents (mais pas toujours meilleurs résultats ...).

Edit:

Il semble que l'utilisation

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

remplacements, ou au moins des peaux, la text-decoration. Cela ne fournit vraiment tout type de réponse, mais offre au moins une solution de contournement de toutes sortes.

Answer 8

Vous pouvez liens vers des fichiers sélectionnera automatiquement pdf-en:

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

IE inférieur à 8 peut être activé pour fonctionner correctement en mettant en œuvre 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]-->

Il fonctionne également très bon dans les versions al IE lorsque vous utilisez le service après-avant-contenu chose pour dosplaying entre guillemets.

Answer 9

Placez le contenu tout à fait 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, pas testé dans tous les autres navigateurs mais, bonne chance!

Answer 10

Salut je aussi des problèmes avec cela aussi bien et est arrivé de tomber sur une solution de contournement.

Pour contourner, j'enveloppai l'URL dans div et utilisé quelque chose comme ça.

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

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

Answer 11

1)

:after{
    position: absolute;
}

est pas parfait, parce que le contenu de l'élément ne sera pas envelopper

2)

:after{
    display: inline-block;
}

est pas parfait, parce que nous voulons parfois après que le contenu devrait toujours envelopper avec le dernier mot de contenu de l'élément.

Pour l'instant, je ne pouvais pas trouver de trouver une solution parfaite correspond à l'ensemble des 3 conditions (1. Le contenu peut automatiquement envelopper si elle est trop long contenu de 2.après devrait envelopper avec le contenu de l'élément, ce qui signifie après que le contenu ne doit pas occuper seul par elle auto. 3.text décoration ne doit être applicable à la condition de ne pas appliquer l'élément après le contenu.) I pensées pour utilise maintenant autre façon d'imiter décoration de texte.