8
votes

Comment ne pas souligner un élément dans un lien?

J'essaie de souligner le lien à l'exception de l'élément #myspan, que je ne veux pas souligner en aucune circonstance. J'aimerais aussi changer la couleur de # myspan. Les règles ne semblent pas s'y appliquer. Si j'inverse l'ordre et que je ne souligne pas le "a" mais que je souligne #myspan, cela semble appliquer les règles. J'ai vu une décoration de texte pour le lien et l'étendue à l'intérieur de ce lien en vain.

  <a href="#">A link <span id="myspan">some additional information</span></a>

    a {
      text-decoration: underline;
    }
    
    a #myspan {
      color: black;
      text-decoration: none;
    }
    
    a:active #myspan {
      color: grey;
      text-decoration: none;
    }
    
    a:visited #myspan {
      color: yellow;
      text-decoration: none;
    }
    
    a:hover #myspan {
      color: red;
      text-decoration: none;
    }

html css

0 commentaires

3 Réponses :

2
votes

J'ai créé a: hover #myspan, a: hover

<a href="#">A link <span id="myspan">some additional information</span></a>

a {
  text-decoration: underline;
}

a #myspan {
  color: black;
  text-decoration: none;
}

a:active #myspan {
  color: grey;
  text-decoration: none;
}

a:visited #myspan {
  color: yellow;
  text-decoration: none;
}

a:hover #myspan, a:hover {
  color: red;
  text-decoration: none;
}

1 commentaires

ne pensez pas que OP veut que le span soit souligné sous aucune condition. souligner le lien à l'exception de l'élément #myspan

6
votes

Faites en sorte que l'élément soit inline-block et il ne sera pas affecté par le soulignement:

<a href="#">A link<span id="myspan">some additional information</span></a>

a {
  text-decoration: underline;
}

a #myspan {
  color: black;
  display:inline-block;
  margin-left:4px;
}


a:active #myspan {
  color: grey;
}

a:visited #myspan {
  color: yellow;
}

a:hover #myspan {
  color: red;
}

Notez que les décorations de texte ne sont pas propagées aux descendants flottants et positionnés de manière absolue, ni au contenu des descendants atomiques de niveau en ligne tels que les blocs en ligne et les tables en ligne. ^ref

Pour supprimer le petit espace entre le texte et l'intervalle, vous pouvez supprimer l'espace blanc et utiliser une petite marge:

<a href="#">A link <span id="myspan">some additional information</span></a>

a {
  text-decoration: underline;
}

a #myspan {
  color: black;
  display:inline-block;
}

a:active #myspan {
  color: grey;
}

a:visited #myspan {
  color: yellow;
}

a:hover #myspan {
  color: red;
}

0 commentaires

1
votes

<a href="#"><span id="span1">A link </span><span id="myspan">some additional information</span></a>

0 commentaires