Je présente de courts fragments de code CSS (extrait) pour implémenter la mise en évidence des ancres de lien avec un soulignement fluide au survol.
Pourquoi vous devez séparer le texte du désordre général est une évidence. Il existe une grande variété de manières et de types de conception de liens, tout n'est limité que par l'imagination du maître.
Avec l'aide de la pseudo-classe:hover et magic, vous pouvez attacher presque n'importe quel effet à des liens cyanotiques standards et ennuyeux.
Les solutions qui seront discutées aujourd’hui ne sont ni particulièrement étonnantes ni inhabituelles. Tout est simple, sans cloches ni sifflets particuliers, il suffit de mettre en évidence le lien en couleur et en animation lumineuse du soulignement.

Je décrirai en détail uniquement le code CSS, puisqu'il n'est pas nécessaire de modifier ou d'ajouter quoi que ce soit du côté Html.

CSS

Tout d'abord, en utilisant la propriété line-height : définissez l'espacement des lignes en fonction de la ligne de base de la police, votre valeur peut être différente ; Faisons du lien un lien de ligne de bloc, intégré dans la structure du texte, en définissant sa propriété display sur inline-block . Débarrassons-nous du soulignement standard en écrivant text-decoration:none; et remplissez le lien avec la couleur dont nous avons besoin.

a ( hauteur de ligne : 1 ; affichage : bloc en ligne ; couleur : #ffeb3b ; décoration de texte : aucune ; curseur : pointeur ; )

a ( hauteur de ligne : 1 ; affichage : bloc en ligne ; couleur : #ffeb3b ; décoration de texte : aucun ; curseur : pointeur ; )

Ensuite, nous utilisons le pseudo-élément:after afin de pouvoir ajouter un élément supplémentaire, dans notre cas une ligne, et définir un effet de transition simple dans la propriété transition:. La largeur de ligne sera initialement définie sur une largeur nulle : 0 % ; , la hauteur est déterminée en 2px. La couleur de la ligne peut être n'importe quoi ; dans l'exemple, je n'ai pas été trop créatif et j'ai défini les couleurs du texte du lien en conséquence.

a : après ( affichage : bloc ; contenu : " " ; hauteur : 2px ; largeur : 0% ; couleur d'arrière-plan : #ffeb3b ; transition : largeur . 3s facilité d'entrée et de sortie ; )

a:after ( affichage : bloc ; contenu : " " ; hauteur : 2px ; largeur : 0% ; couleur d'arrière-plan : #ffeb3b ; transition : largeur .3s facilité d'entrée-sortie ; )

Il ne reste plus qu'à ajouter un peu de mouvement à notre lien. Pour ce faire, nous utilisons quelques pseudo-classes : hover et : focus . Le premier déterminera le style du lien au survol, le second fonctionnera lorsque le curseur sera placé « étroitement » sur le lien. Ici, nous allons modifier la valeur de la largeur et la définir sur 100 %.
Désormais, lors du survol ou du focus sur un lien, un soulignement stylisé apparaîtra à l'œil de l'utilisateur, en douceur avec un retard à peine perceptible, dont nous avons prudemment défini le temps plus tôt dans la propriété de transition : .

a : survol : après, a : focus : après (largeur : 100 % ; )

a:hover:after, a:focus:after (largeur: 100%;)

En conséquence, nous obtenons l'image suivante :

L'ensemble du code assemblé ressemblera à ceci :

a ( affichage : inline-block ; couleur : #ffeb3b ; hauteur de ligne : 1 ; décoration de texte : aucun ; curseur : pointeur ; ) a: après ( couleur d'arrière-plan : #ffeb3b ; affichage : bloc ; contenu : "" ; hauteur : 2px ; largeur : 0% ; -webkit-transition : largeur .3s facilité d'entrée-sortie ; -moz--transition : largeur .3s facilité d'entrée-sortie ; largeur : 100% )

a ( affichage : bloc en ligne ; couleur : #ffeb3b ; hauteur de ligne : 1 ; décoration de texte : aucun ; curseur : pointeur ; ) a: après ( couleur d'arrière-plan : #ffeb3b ; affichage : bloc ; contenu : " " ; hauteur : 2px ; largeur : 0 % ; -webkit-transition : largeur .3s facilité d'entrée-sortie ; -moz--transition : largeur .3s facilité d'entrée-sortie a:hover:after, a:focus:after ( largeur : 100 % ; )

Bien sûr, ce n’est que l’une des options les plus simples et les plus modestes pour la conception de liens. Expérimentez davantage, ajoutez des couleurs, utilisez l'animation, déplacez-vous vers la droite ou la gauche, faites des liens à l'envers par exemple, etc., etc., l'essentiel est de ne pas en faire trop, tout doit être avec émotion, sens et arrangement .

Mise à jour et ajouts du 22/10/2017

Dans les commentaires, il y avait des questions sur la façon de souligner à partir du centre du texte du lien, avec un étirement fluide vers les côtés. S'il y a une demande, alors il y aura une offre))).

Tout est assez simple, il vous suffit d'ajouter quelques nouvelles propriétés, c'est-à-dire que pour l'élément principal a, définissez le positionnement comme position relative : relatif ; , et pour le pseudo-élément a:after Absolute position:absolute; avec distance du bord gauche de l'élément parent left:50%; , et également en utilisant la propriété transform pour déterminer le décalage horizontal de l'élément par la valeur spécifiée transform:translateX(-50%) .

En sortie nous obtenons ce résultat :

Une fois assemblé, tout le code CSS, pour souligner en douceur le lien depuis le centre, devrait ressembler à ceci :

a ( display : inline-block ; color : #ffeb3b ; line-height : 1 ; text-decoration : none ; curseur : pointeur ; position : relative ; ) a: after ( background-color : #ffeb3b ; display : block ; content : "" ; largeur : 0% ; position : absolue ; -webkit-transition : largeur .3s facilité d'entrée-sortie ; ; -moz-transform: traduireX(-50% ) ; transformer : traduireX(-50% ) ; après , a: focus : après ( largeur : 100% ; )

a ( affichage : bloc en ligne ; couleur : #ffeb3b ; hauteur de ligne : 1 ; décoration de texte : aucun ; curseur : pointeur ; position : relative ; ) a: après ( couleur d'arrière-plan : #ffeb3b ; affichage : bloc ; contenu : "" ; largeur : 0 % ; position : absolue ; -webkit-transition : largeur de transition .3s : largeur de sortie .3s -webkit-transform : translateX ; ; après, a:focus:après ( largeur : 100%; )

Aujourd'hui, étant donné que tous les navigateurs modernes prennent en charge de plus en plus en toute confiance les propriétés du clip CSS3, il n'y a pratiquement aucune restriction pour la conception originale des liens, dans l'ensemble, tout dépend de votre imagination, et il existe de nombreuses solutions toutes faites. sur Internet, si vous le souhaitez, il y en aura, comme on dit, pour tous les goûts et toutes les couleurs.

Cordialement, Andreï

Il existe de nombreuses balises pour formater le texte. Certains d’entre eux sont utilisés souvent (et vous vous en souviendrez rapidement), d’autres rarement (vous n’avez pas besoin de vous en souvenir).

Nous examinerons ici ceux qui sont fréquemment utilisés.

Balises qui créent des titres de texte

Ces balises mettent en évidence le texte sous forme de titres. Ceux. Chaque titre commence sur une nouvelle ligne, est mis en évidence en gras et a sa propre taille (le titre du premier niveau est le plus grand, le sixième niveau est le plus petit).

Ces balises peuvent être utilisées avec l'option d'alignement horizontal aligner. Valeurs possibles pour ce paramètre :

• gauche- gauche,
• droite- sur la droite,
• centre- au centre,
• justifier- en largeur.

Exemple de code :

Balises de saut de paragraphe et de saut de ligne

Étiqueter
- balise de saut de ligne forcé. Le texte après cette balise commence sur une nouvelle ligne.
Balises divisez le texte en paragraphes. Avant le début de chaque paragraphe, vous devez placer une balise

, la balise de fermeture est facultative. Contrairement à l'étiquette
Les paragraphes sont séparés les uns des autres par une ligne vierge.

À l'étiquette

il y a un paramètre aligner, qui spécifie la manière dont le texte d'un paragraphe est aligné. Valeurs possibles pour ce paramètre :

• gauche- gauche,
• droite- sur la droite,
• centre- au centre,
• justifier- en largeur.

Exemple de code :

Formatage HTML

Il s'agit d'un paragraphe, il est séparé du reste du texte par des lignes blanches en haut et en bas et aligné à gauche.

Il s'agit d'un paragraphe, il est séparé du reste du texte par des lignes blanches en haut et en bas et est aligné à droite.

Il s'agit d'un paragraphe, il est séparé du reste du texte par des lignes vides en haut et en bas et aligné au centre.

C'est juste du texte.
Il s'agit d'un texte sur une nouvelle ligne.

Dans la fenêtre du navigateur, cela ressemblera à ceci :

Balises qui mettent le texte en italique

Ces balises mettent le texte en italique, mais elles le font pour différentes raisons.
Balises utilisé pour mettre en évidence logiquement les titres de livres, d’articles et de citations.
Balises sont utilisés pour mettre en évidence les définitions.
Balises Et mettre en évidence les parties importantes du texte. L'utilisation de ce dernier n'est pas recommandée.

Exemple de code :

Formatage HTML Ce texte est dans les balises cite
Ce texte est dans les balises dfn
Ce texte est dans les balises em
Ce texte est dans les balises i

Dans la fenêtre du navigateur, cela ressemblera à ceci :

Balises qui mettent le texte en gras

Les deux sont utilisés pour mettre en évidence des sections importantes du texte, mais le premier est préférable.

Exemple de code :

Ce texte est en balises fortes
Ce texte est dans les balises b

Dans la fenêtre du navigateur, cela ressemblera à ceci :

Balises qui mettent en évidence le texte avec le soulignement

Les deux sont utilisés pour souligner des passages importants d’un texte, mais le premier est préféré.

Exemple de code :

Formatage HTML Juste du texte

Ce texte est dans vos balises

Dans la fenêtre du navigateur, cela ressemblera à ceci :

Balises qui affichent du texte dans une police monospace

Le texte est affiché dans une police à espacement fixe, mais il est préférable d'utiliser la première.

Exemple de code :

Formatage HTML Juste du texte
Ce texte est dans les balises kbd
Ce texte est dans les balises samp
Ce texte est dans les balises tt

Dans la fenêtre du navigateur, cela ressemblera à ceci :

Balises qui affichent du texte en exposant et en indice

Balises afficher le texte sous le niveau de la ligne dans une taille de police plus petite.
Balises afficher le texte au-dessus du niveau de la ligne dans une taille de police plus petite.
Pratique pour dériver des formules mathématiques et chimiques.

Exemple de code :

Formatage HTML y=x 2 - équation d'une parabole.

H 2 O est la formule de l'eau.

Dans la fenêtre du navigateur, cela ressemblera à ceci :

La balise font et ses paramètres

Balises indiquez les paramètres de police du texte :

affronter- nom de la police. Vous pouvez lister plusieurs noms de polices, séparés par des virgules. Dans ce cas, si la première police spécifiée n’est pas trouvée (vous ne savez pas quelles polices sont installées sur l’ordinateur de l’utilisateur), le navigateur utilisera la suivante dans la liste.

taille- taille de police en unités arbitraires de 1 à 7. La taille de police par défaut est 3.

couleur- couleur du texte (par défaut - noir).

Il existe deux manières de spécifier une couleur : par son nom et en spécifiant un code couleur hexadécimal.

Avec les couleurs personnalisées (il y en a 156) tout est simple, regardez le tableau correspondant, sélectionnez la couleur qui vous plaît et écrivez son nom dans la valeur du paramètre (par exemple, color="bleu").

Mais la deuxième méthode offre beaucoup plus de choix. Ici on peut choisir parmi un million de couleurs en précisant son code hexadécimal. Ce code comporte 6 chiffres et commence par le caractère "#". Nous n'entrerons pas dans le détail de la façon dont le code couleur est généré, nous soulignerons seulement qu'il peut être obtenu, par exemple, dans Photoshop. Découvrez comment procéder sur la page
Ce sera plus clair avec un exemple :

Soulignons le mot « texte » en rouge :

Texte

Ajoutons maintenant des balises italiques (ouverture à gauche, fermeture à droite) :

Texte

Et maintenant - balises en gras :

Texte

Chaque fois, nous plaçons toutes les balises précédentes dans les nouvelles. C'est ce qu'on appelle l'ordre d'imbrication. Vous pouvez utiliser différentes balises pour formater le texte, l'essentiel est de ne pas violer l'ordre d'imbrication.

Ceci conclut la troisième leçon, nous avons examiné les principales méthodes de formatage du texte, dans la leçon suivante, nous examinerons les balises de formatage moins applicables. Néanmoins, ce ne serait pas une mauvaise idée de vous familiariser avec eux.

En utilisant HTML, vous pouvez donner au texte un beau design. L’élément souligné est très populaire, mais tous les utilisateurs réguliers ne savent pas comment l’utiliser.

Souligner en HTML

Alors, comment souligner ? en HTML, il est formaté à l'aide d'une balise . Il est utilisé dans toutes les spécifications HTML et Xhtml, mais uniquement sous condition de transition. , puisque la version du navigateur du balisage doit être spécifiée. Dans ce cas, le document passe la validation avec succès. L'élément doit être indiqué en standard, c'est-à-dire tout en haut de la page.

Étiqueter fermeture, il doit être accompagné. Vous devez l'ajouter au balisage comme ceci :

1. Titre numéro un

Notre texte dans un paragraphe

Le mot « texte » sera souligné.

Vous pouvez également souligner une seule lettre dans un mot :

1. Titre numéro deux

Les nôtres À er du paragraphe

Traditionnellement, dans le balisage HTML, les liens sont affichés avec des soulignements lorsqu'ils sont survolés avec la souris ou même à l'arrêt, et cela se produit par défaut dans tous les navigateurs. Par conséquent, mettez la balise de manière continue est fortement déconseillé.

De plus, l'écriture de styles en CSS rend le code plus compact, ce qui signifie que la page se chargera plus rapidement.

Le plus souvent, les concepteurs de mise en page appliquent des styles en ajoutant des bordures ou en soulignant au HTML ou en les plaçant dans un fichier CSS distinct.

Souligner en CSS

Décorer du texte à l’aide de CSS est un moyen pratique et pratique. Le moyen le plus simple de mettre en évidence cela consiste à utiliser la décoration de texte ou la bordure inférieure.

Pour mettre en évidence du texte avec une décoration de texte, la propriété doit être ajoutée à la classe souhaitée.

• classe souhaitée (
• décoration de texte : souligner ;

Il ne faut pas oublier que les noms de classes sont toujours écrits en latin.

La décoration peut également se faire à l’aide de bordures. Les bordures vous permettent de créer à la fois un soulignement régulier (solide) et un soulignement en pointillés. Pour ce faire, les propriétés de bordure nécessaires sont spécifiées, mais la propriété de décoration du texte est supprimée.

• classe souhaitée (
• décoration de texte : aucune ;

Le texte est ensuite décoré à l'aide de la propriété suivante :

• .classe souhaitée (
• décoration de texte : aucune ;
• bordure inférieure : 2 px en pointillés noirs ;

Voici comment se présente la décoration : pour la rendre solide, au lieu de « pointillés », on utilise « solide ». Pour ceux qui aiment décorer le texte avec un soulignement en pointillés, vous pouvez essayer d'utiliser « pointillé ».

Les styles de cadre sont écrits sur une seule ligne. En plus du type de soulignement, vous devez également spécifier l’épaisseur et la couleur du soulignement. Vous pouvez expérimenter avec la taille, mais généralement 1 ou 2 pixels suffisent. La couleur du texte peut également être définie sur la couleur de soulignement :

• classe souhaitée (
• décoration de texte : aucune ;
• bordure inférieure : 1px pointillé bleu ;
• couleur : bleu ;

Cela créera un texte bleu avec une décoration bleue. Pour attacher un style au HTML, vous devez ajouter une classe au balisage.

• Troisième titre

Notre texte en un paragraphe

Voilà, c'est la base du soulignement en HTML.

De l'auteur : Le style des soulignements de liens est assez délicat et j'oublie toujours quelle méthode est la meilleure dans quelle situation. Heureusement, John Jameson va nous aider à comprendre rapidement cela dans son article.

Il existe de nombreuses façons de styliser les soulignements. Vous vous souvenez peut-être de l'article « Création de soulignements de liens sur Medium ». Medium n'essayait pas de faire quoi que ce soit qui sorte de l'ordinaire, ils voulaient juste créer des soulignements attrayants dans le texte.

Des soulignements fins et noirs avec des espaces autour des lettres avec des légendes inférieures - travail de Marcine Witchery tiré de l'article Création de soulignements de liens sur support.

Un soulignement de bon standard qui est également de bonne taille et permet les descendeurs. Bien mieux que la valeur par défaut de la plupart des navigateurs. Il s'avère que Medium a été confronté à de nombreux défis en cours de route. Et même deux ans plus tard, un bon style de soulignement pose encore beaucoup de problèmes.

Objectifs

Pourquoi ne pas simplement utiliser text-decoration: underline ? Si nous parlons d'un scénario idéal, les traits de soulignement devraient :

être situé en dessous de la ligne de base ;

sauter les lettres inférieures ;

changer la couleur, l'épaisseur et les styles ;

aller à une nouvelle ligne ;

travailler avec n’importe quel arrière-plan.

Je pense qu'il est tout à fait possible pour nous d'exiger toutes ces choses des traits de soulignement, mais à ma connaissance, il n'existe aucun moyen intuitif de faire toutes ces choses en CSS.

Approches

Alors, de quelles méthodes disposons-nous pour souligner un texte ? Je me suis souvenu de ce qui suit :

décoration de texte ;

image d'arrière-plan ;

Filtres SVG ;

Souligner.js(toile);

texte-décoration-*

Passons en revue toute la liste et considérons tous les avantages et inconvénients de chaque approche.

propriété de décoration de texte

La propriété text-decoration est le moyen le plus simple de souligner du texte. Il vous suffit d'appliquer une seule propriété. Sur un petit texte, une telle ligne aura fière allure, mais si vous augmentez la taille de la police, elle semblera gênante.

Le plus gros problème avec la propriété text-decoration est le manque de personnalisation. La ligne utilise la couleur et la taille de police du texte auquel elle est appliquée, et il n'existe aucun moyen multi-navigateur de modifier les styles. Nous parlerons de cette propriété plus en détail un peu plus tard.

Avantages

facile à utiliser ;

situé en dessous de la ligne de base ;

ignore les descendeurs par défaut dans Safari et iOS ;

passe à une nouvelle ligne ;

fonctionne avec n’importe quel arrière-plan.

Inconvénients

n'ignore pas les descendants de lettres dans d'autres navigateurs ;

La couleur, l'épaisseur et les styles ne peuvent pas être modifiés.

propriété de bordure inférieure

La propriété border-bottom est un bon équilibre entre vitesse et personnalisation. Cette approche utilise des cadres CSS éprouvés, ce qui signifie que vous pouvez facilement modifier la couleur, l'épaisseur et les styles. Voici à quoi ressemble la propriété border-bottom sur les éléments en ligne :

Le plus gros inconvénient est la distance entre le soulignement et le texte. Le soulignement est situé sous les descendants des lettres. Ce problème peut être résolu en créant un bloc en ligne et en réduisant la hauteur de la ligne, mais la possibilité de passer à de nouvelles lignes est alors perdue. Bon pour les lignes simples, mais pas plus.

Vous pouvez également utiliser text-shadow pour masquer des parties de la ligne autour des légendes inférieures. Dans ce cas, vous devrez imiter la couleur du fond, ce qui signifie que la méthode ne fonctionne que sur des fonds uniformes. Les dégradés et les images ne fonctionneront pas.

Il existe actuellement 4 propriétés pour le style souligné. Bien mieux qu'une simple décoration de texte.

Avantages

vous pouvez utiliser la propriété de transition et animer la couleur et l'épaisseur ;

passe aux nouvelles lignes par défaut si l'élément n'est pas un bloc en ligne ;

Inconvénients

la ligne est située très loin et est difficile à déplacer ;

trop de propriétés inutiles doivent être utilisées pour que le soulignement soit beau ;

Mauvaise mise en évidence du texte lors de l'utilisation de Text-Shadow.

propriété box-shadow

La propriété box-shadow dessine un soulignement à l'aide de deux ombres intérieures : une qui crée le rectangle et une qui le masque. Cela signifie que pour que la méthode fonctionne correctement, un arrière-plan uniforme est nécessaire.

La même astuce texte-ombre peut être utilisée pour simuler le saut des légendes inférieures des lettres. Si la couleur de la ligne est différente de celle du texte ou si elle est suffisamment fine, il ne devrait y avoir aucun problème, comme c'est le cas avec la décoration du texte.

Avantages

peut être placé en dessous de la ligne de base ;

vous pouvez ignorer les légendes en utilisant text-shadow ;

vous pouvez changer la couleur et l'épaisseur ;

passe à de nouvelles lignes.

Inconvénients

les styles ne peuvent pas être modifiés ;

Ne fonctionne pas avec tous les arrière-plans.

propriété d'image d'arrière-plan

La propriété background-image résout mieux nos problèmes et présente très peu d’inconvénients. L'idée est de créer une image en utilisant un dégradé linéaire et une position d'arrière-plan qui se répètent sur un axe horizontal le long des lignes de texte. L'élément doit être display: inline;.

La démo ci-dessous n'utilise pas de dégradé linéaire. Pour créer un effet sympa, vous pouvez utiliser votre propre image.

Avantages

peut être positionné en dessous de la ligne de base ;

vous pouvez ignorer les légendes du bas en utilisant text-shadow ;

vous pouvez changer la couleur, l'épaisseur (même d'un demi-pixel) et les styles ;

fonctionne avec des images personnalisées ;

passe à de nouvelles lignes ;

fonctionne avec n'importe quel arrière-plan tant que vous n'utilisez pas d'ombre de texte.

Inconvénients

La taille de l'image peut varier en fonction de la résolution, du navigateur et du niveau de zoom.

Filtres SVG

C'est la méthode avec laquelle j'ai joué. Vous pouvez créer un élément de filtre SVG en ligne qui tracera la ligne et développera le texte pour masquer les parties de la ligne qui doivent être transparentes. Le filtre peut recevoir un identifiant et être référencé en CSS en utilisant filter: url('#svg-underline').

Ce qui est génial, c'est que le filtre ajoute de la transparence sans s'appuyer sur l'ombre du texte. Cela signifie que vous pouvez ignorer les ballons de lettres sur n'importe quel arrière-plan, y compris les dégradés et les images ! L'exemple ci-dessous ne fonctionne qu'avec une seule ligne de texte, alors soyez prudent.

Et voici à quoi cela ressemble dans Chrome et Firefox :

Il existe des problèmes de support dans IE, Edge et Safari. Il est difficile de tester la prise en charge des filtres SVG en CSS. Vous pouvez utiliser la règle @supports sur le filtre, mais cela vérifiera uniquement si le lien lui-même fonctionne, et non si le filtre est appliqué ou non. Ma méthode est assez rude pour les navigateurs, alors soyez doublement prudent.

Avantages

situé en dessous de la ligne de base ;

saute les leaders inférieurs ;

Vous pouvez modifier la couleur, l'épaisseur et les styles ;

fonctionne sur n’importe quel arrière-plan.

Inconvénients

ne saute pas vers de nouvelles lignes ;

ne fonctionne pas dans IE, Edge et Safari, mais vous pouvez spécifier la décoration de texte comme solution de secours. Les soulignements dans Safari sont superbes en eux-mêmes.

Souligner.js (Toile)

Underline.js est une bibliothèque étonnante. Je suis impressionné par ce que Wenting Zhang a pu faire avec JS et par l'attention portée aux détails. Si vous n'avez pas encore vu la démo technique Underline.js, arrêtez-vous une minute et jetez-y un œil. Il existe en ligne un merveilleux discours de neuf minutes sur les principes du travail, je vais vous le raconter rapidement maintenant. Les soulignements sont dessinés à l'aide de toile. Une toute nouvelle approche qui fonctionne étonnamment bien.

Malgré le nom attrayant, il ne s'agit que d'une démo technique. Autrement dit, vous ne pourrez pas intégrer immédiatement la bibliothèque dans le projet sans toute une série de modifications.

Cette bibliothèque ne mérite d'être mentionnée qu'à titre de preuve de concept. Canvas a le potentiel de créer de superbes surlignages interactifs, mais vous devrez écrire du code JS supplémentaire pour qu'il fonctionne correctement.

Propriétés texte-décoration-*

Vous vous souvenez quand j'ai dit que nous aborderions plus en détail quelque chose un peu plus tard ? Maintenant, faisons ceci. La propriété text-decoration fonctionne bien seule, mais nous pouvons ajouter quelques propriétés expérimentales pour un rendu encore meilleur :

texte-décoration-couleur

sauter la décoration du texte

style de décoration de texte

Ne vous réjouissez pas à l’avance, vous connaissez la prise en charge des navigateurs.

propriété text-decoration-color

La propriété text-decoration-color vous permet de modifier la couleur de soulignement séparément de la couleur du texte. La propriété dispose même d’un bon support de navigateur. Cela fonctionne dans Firefox et préfixé dans Safari. Il y a un inconvénient : si vous ne supprimez pas la ligne autour des légendes, dans Safari, elle se trouvera au-dessus du texte. Firefox :

propriété text-decoration-skip

La propriété text-decoration-skip est chargée de sauter les bulles de pied de page dans le texte souligné.

La propriété n’est pas standard et ne fonctionne actuellement que dans Safari. Pour travailler dans d'autres navigateurs, vous devez utiliser le préfixe –webkit-. Dans Safari, cette propriété est activée par défaut, c'est pourquoi les traits de soulignement sautent les pieds de page même sur les sites où cette propriété n'est pas spécifiée.

Si vous utilisez Normalize, vous devez savoir que les versions récentes désactivent la propriété pour qu'elle fonctionne normalement dans tous les navigateurs. Si vous souhaitez récupérer ces soulignements presque magiques, vous devez activer cette propriété.

propriété de style de décoration de texte

La propriété text-decoration-style offre le même ensemble de soulignements que la propriété border-style, mais ajoute également un nouveau look : ondulé. Valeurs possibles :

Pour le moment, la propriété text-decoration-style ne fonctionne que dans Firefox, voici une capture d'écran :

Ensemble de soulignements monochromes Ressemble-t-il ?

Qu'est-ce qui ne va pas?

Les propriétés text-decoration-* sont plus intuitives que les autres propriétés de style souligné. Cependant, si vous examinez différemment les exigences que nous avons présentées précédemment, vous remarquerez qu'en utilisant ces propriétés, vous ne pouvez pas modifier l'épaisseur et la position. Après quelques recherches, j'ai trouvé ces deux propriétés :

texte-souligné-largeur

position de soulignement du texte

Il semble que ces propriétés aient été supprimées d'une première version de CSS en raison du manque d'intérêt qu'elles suscitent. Ils n'ont jamais été utilisés. Hé, ce n'est pas ma faute.

Conclusions

Alors, quelle est la meilleure façon de souligner un texte ? Tout dépend de divers facteurs.

Pour les petits textes, je recommande d'utiliser text-decoration et la propriété expérimentale text-decoration-skip, en espérant que cela fonctionnera. Dans la plupart des navigateurs, cela semble moyen, mais cela a toujours été ainsi et les gens n'y ont pas prêté attention. Si vous êtes assez patient, il y a de fortes chances que bientôt tous vos soulignements s'affichent correctement sans que vous ayez à changer quoi que ce soit.

Pour le corps du texte, utilisez background-image. La méthode fonctionne, est magnifique et il existe des mixins Sass pour cela. Si le soulignement est fin ou si la couleur est différente de celle du texte, vous pouvez probablement ignorer la méthode texte-ombre. Pour le texte sur une ligne, utilisez border-bottom et toute autre propriété.

Et pour ignorer les légendes de lettres sur des arrière-plans ou des images dégradés, essayez d'utiliser un filtre SVG. Ou tout simplement ne mélangez pas ces arrière-plans avec des soulignements. À l'avenir, lorsque la prise en charge du navigateur s'améliorera, il sera possible d'utiliser les propriétés text-decoration-*.