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 autant que je sache, 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 de fond;

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 plus en détail de cette propriété 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 en utilisant deux ombres intérieures : une qui crée le rectangle et une qui le cache. 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 que vous créez 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 du 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 seule 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-*.

ou étudiez les balises qui formatent le texte HTML

Nous présentons à votre attention l'une des leçons clés et les plus simples du didacticiel.

• Texte HTML est le composant principal de la plupart des pages Internet.
• Par phrases clés dans le texte de la page HTML les utilisateurs peuvent trouver votre site.
• Texte HTML Peut être n’importe quelle taille et couleur à votre discrétion. Vous pouvez également déterminer le type de police et son volume.
• Taille de la police HTML généralement défini en pixels.
• Formatage du texte HTML largement utilisées, des balises de formatage sont utilisées.

Voir ci-dessous balises qui formatent le texte HTML:

• Mots clés → gras Texte HTML(caractère gras).
• Balises → gras Texte HTML(caractère gras).
• Mots clés → monoespace Texte HTML(police monospace).
• Mots clés → monoespace Texte HTML(police monospace).
• Mots clés → monoespace Texte HTML(police monospace).
• Mots clés → Texte HTML, taille plus grande que d'habitude (grande police).
• Mots clés → Texte HTML, la taille est plus petite que d'habitude (petite police).
• Mots clés → oblique Texte HTML(Police italique).
• Mots clés → oblique Texte HTML(Police italique).
• Mots clés → oblique Texte HTML(Police italique).
• Mots clés → souligné Texte HTML(police soulignée).
• Mots clés → barré Texte HTML(police barrée).
• Mots clés → Texte HTML(police) en indice.
• Mots clés → Texte HTML(police) en exposant.

Formatage du texte HTML : texte barré, souligné

Résultat : ... police monospace

Résultat : ...la taille de la police est plus grande que la normale

Résultat: ... police italique

Résultat : texte barré (police barrée)

Résultat : exposant

Les techniques de formatage présentées ci-dessus ne doivent être utilisées que pour de petites sections de texte. Utilise le CSS si vous souhaitez définir une police spécifique pour toute la page, ou pour plusieurs lignes par exemple.

Il existe de nombreuses façons différentes de styliser un soulignement. Vous vous souvenez peut-être de l'article de Marcin Vichari « Crafting link underlines » sur Medium. Les développeurs de Medium n'essaient pas de faire quelque chose de fou, ils veulent juste créer une jolie ligne sous le texte.

Il s’agit du trait de soulignement le plus simple, mais il est de la bonne taille et ne chevauche pas les leaders des lettres. Et c'est certainement mieux que le trait de soulignement par défaut dans la plupart des navigateurs. Medium a dû relever des défis pour parvenir à son style sur le Web. Deux ans plus tard, nous avons toujours du mal à créer de beaux soulignements.

Objectifs

Quel est le problème avec la décoration de texte habituelle : souligner ? Dans un scénario idéal, le trait de soulignement devrait effectuer les opérations suivantes :

• position en dessous de la ligne de base ;
• ignorer les légendes ;
• changer la couleur, l'épaisseur et le style de la ligne ;
• travailler avec du texte multiligne ;
• travailler sur n’importe quel fond.

Je pense que ce sont toutes des exigences raisonnables, mais autant que je sache, il n'existe aucun moyen intuitif d'y parvenir en utilisant CSS.

Approches

Alors, quelles sont ces différentes manières de mettre en œuvre le soulignement sur le Web ?

Voici ceux que je considère :

• décoration de texte ;
• Bordure du bas ;
• boîte ombre ;
• image de fond ;
• Filtres SVG ;
• Souligner.js(toile);
• texte-décoration-* .

Examinons ces méthodes une par une et parlons des avantages et des inconvénients de chacune d'elles.

décoration de texte

la décoration de texte est la manière la plus évidente de souligner du texte. Vous appliquez une propriété et c'est suffisant. Avec des polices de petite taille, cela peut sembler correct, mais augmentez la taille de la police et le soulignement commence à paraître gênant.

Le plus gros problème avec la décoration de texte est le manque de personnalisation. Vous êtes limité à la couleur et à la taille de la police du texte et il n'existe aucun moyen multi-navigateur de modifier cela. Nous en parlerons plus en détail plus tard.

• facile à utiliser;
• positionné en dessous de la ligne de base ;
• ignore les légendes par défaut dans Safari et iOS ;
• met l'accent sur le texte multiligne ;
• fonctionne sur n’importe quel arrière-plan.

• ne saute pas les pieds de page dans tous les autres navigateurs ;
• ne vous permet pas de modifier la couleur, l'épaisseur ou le style du trait.

Bordure du bas

border-bottom établit un bon équilibre entre simplicité et personnalisation. Cette approche utilise la bonne vieille propriété CSS border, ce qui signifie que vous pouvez facilement modifier la couleur, l'épaisseur et le style.

Voici à quoi ressemble border-bottom pour les éléments en ligne.

Le principal inconvénient est la distance entre le soulignement et le texte ; il se trouve entièrement en dessous des légendes. Vous pouvez résoudre ce problème en définissant les éléments sur inline-block et en diminuant la line-height , mais vous perdrez alors la possibilité d'envelopper le texte. Idéal pour les lignes individuelles, mais ne convient nulle part ailleurs.

De plus, nous pouvons utiliser text-shadow pour masquer la partie de la ligne à côté des éléments en ligne, en simulant cela en utilisant la même couleur que l'arrière-plan. Autrement dit, cette technique ne fonctionne que sur un simple fond monochrome, sans dégradés, motifs ou images.

À l’heure actuelle, nous utilisons déjà jusqu’à quatre propriétés pour concevoir une ligne. C'est beaucoup plus de travail que simplement ajouter une décoration de texte.

• peut ignorer les légendes en utilisant text-shadow ;
• peut changer la couleur, l'épaisseur et le style de ligne ;
• vous permet d'utiliser des transitions et des animations de couleur et d'audace ;
• fonctionne avec du texte multiligne à moins que le bloc en ligne ne soit appliqué ;
• Fonctionne sur n'importe quel arrière-plan tant que vous n'utilisez pas text-shadow .

• Positionné trop bas et déplacé de manière difficile ;
• de nombreuses propriétés supplémentaires sont utilisées pour un bon fonctionnement ;
• lorsque vous utilisez text-shadow, la mise en évidence du texte semble moche.

boîte ombre

box-shadow dessine une sous-ligne en utilisant deux ombres intérieures : l'une crée un rectangle et la seconde en cache une partie. Cela signifie que vous avez besoin d’un arrière-plan de couleur unie pour que cela fonctionne.

Vous pouvez utiliser la même astuce avec text-shadow pour combler les espaces entre les soulignements et les légendes. Mais si la couleur de soulignement est différente de la couleur du texte - ou si elle est juste assez fine - la ligne n'entrera pas autant en collision avec les légendes qu'avec text-decoration .

• vous permet de changer la couleur et l'épaisseur du trait ;
• fonctionne avec du texte multiligne.

• ne vous permet pas de modifier le style de soulignement ;
• Ne fonctionne sur aucun arrière-plan.

image de fond

La méthode de l'image d'arrière-plan est la plus proche de ce que nous souhaitons et présente le moins d'inconvénients. L'idée est d'utiliser un dégradé linéaire et une position d'arrière-plan pour créer une image qui se répète sous les lignes de texte.

Pour que cette approche fonctionne, le texte doit être en affichage standard : en ligne ; .

L'option suivante se passe de gradient linéaire, pour les effets, vous pouvez ajouter votre propre image d'arrière-plan.

• peut être positionné en dessous de la ligne de base ;
• peut ignorer les éléments de légende en utilisant text-shadow ;
• fonctionne avec des images personnalisées ;
• encapsule plusieurs lignes de texte ;
• Fonctionne sur n'importe quel arrière-plan tant que vous n'utilisez pas text-shadow .

• La taille de l'image peut varier en fonction de la résolution de l'écran, du navigateur et du grossissement.

Filtres SVG

J'ai pas mal joué avec cette méthode. Vous pouvez créer un filtre de ligne SVG qui dessine une ligne, puis développe le texte pour masquer la partie de la ligne que nous souhaitons rendre transparente. Vous pouvez ensuite donner un identifiant au filtre et le référencer en CSS quelque chose comme filter: url('#svg-underline') .

L'avantage de cette approche est que la transparence est obtenue sans utiliser text-shadow , ce qui signifie que nous laissons les légendes apparaître sur n'importe quel arrière-plan, y compris les dégradés et les images d'arrière-plan ! Cela ne fonctionne que sur une seule ligne de texte, alors gardez cela à l'esprit.

Voici à quoi cela ressemble dans Chrome et Firefox :

La prise en charge dans IE, Edge et Safari est problématique. Il est difficile de tester la prise en charge du filtre SVG en CSS. Vous pouvez utiliser la directive @supports avec filter , mais cela vérifiera uniquement la fonctionnalité de la référence du filtre, pas la fonctionnalité du filtre lui-même. Mes tentatives se sont soldées par une détermination fastidieuse des capacités du navigateur ; c'est un inconvénient important de la méthode.

• peut être positionné en dessous de la ligne de base ;
• peut ignorer les éléments d'extension ;
• permet des changements de couleur, d'épaisseur et de style de ligne ;
• fonctionne sur n’importe quel arrière-plan.

• ne fonctionne pas avec du texte multiligne ;
• ne fonctionne pas dans IE, Edge et Safari, mais vous pouvez utiliser la décoration de texte comme solution de secours, cela semble correct dans Safari.

Souligner.js (Toile)

Underline.js est fascinant. Je trouve impressionnant ce que Wenting Zhang a accompli avec sa maîtrise de JavaScript et son souci du détail. Si vous n'avez pas vu la démo technique Underline.js, arrêtez de lire et donnez-lui une minute. Elle explique également pendant neuf minutes comment cela fonctionne, mais je serai bref : le soulignement est dessiné à l'aide d'éléments. . Il s’agit d’une nouvelle approche qui fonctionne étonnamment bien.

Malgré son nom accrocheur, Underline.js n'est qu'une démo technique. Cela signifie que vous ne pouvez pas simplement le brancher sur votre projet sans modifier le code.

Je pensais mentionner cela comme une preuve de concept qui a le potentiel de créer de superbes soulignements interactifs, mais vous devez écrire votre propre JavaScript pour le faire fonctionner.

Nouvelles propriétés de décoration de texte

Vous vous souvenez que j'avais promis de parler davantage de décoration de texte. Le temps est venu.

Cette propriété fonctionne très bien seule, mais vous pouvez ajouter des propriétés expérimentales pour personnaliser l'apparence du soulignement.

• texte-décoration-couleur
• sauter la décoration du texte
• style de décoration de texte

Mais ne soyez pas trop excité... La prise en charge du navigateur est comme toujours. Ainsi va.

texte-décoration-couleur

La propriété text-decoration-color vous permet de modifier la couleur de soulignement séparément de la couleur du texte. La prise en charge de cette propriété est meilleure que ce à quoi vous pourriez vous attendre : elle fonctionne dans Firefox et avec le préfixe dans Safari. Voici le problème : si vous avez des légendes, Safari placera un soulignement au-dessus du texte.

sauter la décoration du texte

La propriété text-decoration-skip permet d'ignorer les légendes dans le texte souligné.

Cette propriété n'est pas standard et ne fonctionne actuellement que dans Safari, avec le préfixe -webkit-. Safari active cette propriété par défaut, de sorte que les légendes ne sont pas toujours barrées.

Si vous utilisez Normalize, veuillez noter que les versions récentes désactivent cette propriété dans un souci de cohérence du comportement du navigateur. Et si vous souhaitez que le soulignement n’affecte pas les légendes, vous devez l’activer manuellement.

style de décoration de texte

La propriété text-decoration-style offre les mêmes options de style que la propriété border-style, avec l’ajout d’un style ondulé.

Voici une liste des valeurs disponibles :

• en pointillés
• pointé
• double
• solide

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

Que manque-t-il

La série de propriétés text-decoration-* est beaucoup plus intuitive à utiliser que les autres propriétés de décoration soulignées CSS. Mais si nous y regardons de plus près, il n’existe pas suffisamment de moyens de définir l’épaisseur ou la position de la ligne pour satisfaire nos besoins.

Après quelques recherches, j'ai trouvé quelques propriétés supplémentaires :

• texte-souligné-largeur
• position de soulignement du texte

Celles-ci semblent être les premières versions de CSS, mais n'ont jamais été implémentées dans les navigateurs en raison d'un manque d'intérêt.

conclusions

Alors, quelle est la meilleure façon de souligner ?

Pour les petits textes, je recommande d'utiliser text-decoration avec un ajout optimiste de text-decoration-skip . Cela semble un peu ringard dans la plupart des navigateurs, mais le soulignement a toujours été ainsi dans les navigateurs et les gens ne le remarqueront tout simplement pas. De plus, il y a toujours une chance que, si vous faites preuve de patience, ce soulignement s'affichera bien un jour sans que vous ayez à modifier quoi que ce soit comme le font les navigateurs.

Pour le corps du texte, il est logique d'utiliser background-image . Cette approche fonctionne, a fière allure et il existe des mixins Sass pour cela. Vous pouvez, en principe, ignorer l'ombre du texte si le soulignement est fin ou d'une couleur différente de celle du texte.

Pour des lignes de texte uniques, utilisez border-bottom ainsi que toutes les propriétés supplémentaires.

Et si vous avez besoin que des légendes apparaissent sur un arrière-plan dégradé ou d'image, essayez d'utiliser des filtres SVG. Ou évitez simplement d'utiliser des traits de soulignement.

À l'avenir, lorsque la prise en charge du navigateur s'améliorera, la seule réponse sera l'ensemble de propriétés text-decoration-*.

Je recommande également de jeter un œil à l'article CSS Underlines Suck de Benjamin Woodroffe, qui aborde les mêmes problèmes.

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 soulignés lors du survol de 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 façon 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 bleue;

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.