Maison > Article > interface Web > Comment épaissir la ligne sous la balise a en CSS

Comment épaissir la ligne sous la balise a en CSS

WBOYoriginal: 2021-12-08 10:55:504872parcourir

En CSS, vous pouvez utiliser l'attribut "border-bottom" et l'attribut "text-decoration" pour rendre la ligne sous la balise a plus épaisse. La syntaxe est "a{text-decoration:none;border-bottom: line enhancement". valeur valeur de couleur unie ;}".

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.

Comment épaissir la ligne sous la balise a en CSS

En CSS, vous pouvez utiliser l'attribut border-bottom et l'attribut text-decoration pour rendre la ligne sous la balise a plus épaisse,

text-decoration attribut Pour spécifier les modifications ajoutées au texte, l'attribut border-bottom est utilisé pour définir le style de bordure inférieure de l'élément. Par conséquent, nous pouvons d'abord supprimer le soulignement d'origine de la balise a et utiliser la bordure inférieure de l'élément de balise a comme. la ligne sous la balise a De cette façon, il vous suffit de définir la valeur d'épaisseur de la bordure sous la balise a.

L'exemple est le suivant :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        a{
            color:red; 
            border-bottom:5px solid red; 
            text-decoration:none; }
    </style>
</head>
<body>
    <a href="">这是一个a标签</a>
</body>
</html>

Résultat de sortie :

Comment épaissir la ligne sous la balise a en CSS

(Partage de vidéos d'apprentissage : Tutoriel vidéo CSS)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment implémenter la transformation de traduction en CSSArticle suivant：Comment implémenter la transformation de traduction en CSS

Articles Liés

Voir plus