web-dev-qa-db-fra.com

Comment ajouter un soulignement pointé au-dessous du texte HTML

Comment soulignez-vous le texte HTML pour que la ligne sous le texte soit en pointillé plutôt que le soulignement standard? De préférence, je voudrais faire cela sans utiliser un fichier CSS séparé. Je suis un novice au HTML.

htmlunderline
83
parap

C'est impossible sans CSS. En fait, la balise <u> Ajoute simplement text-decoration:underline Au texte avec le code CSS intégré du navigateur.

Voici ce que vous pouvez faire:

<html>
<head>
<!-- Other head stuff here, like title or meta -->

<style type="text/css">
u {    
    border-bottom: 1px dotted #000;
    text-decoration: none;
}
</style>
</head>
<!-- Body, content here -->
</html>
129
Alfred Xing

Sans CSS, vous devez utiliser une balise image. Fondamentalement, créez une image du texte et ajoutez le soulignement. Cela signifie essentiellement que votre page est inutile pour un lecteur d'écran.

Avec CSS, c'est simple.

HTML: 

<u class="dotted">I like cheese</u>

CSS: 

u.dotted{
  border-bottom: 1px dashed #999;
  text-decoration: none; 
}

Exemple courant

Exemple de page 

<!DOCTYPE HTML>
<html>
<head>
    <style>
        u.dotted{
          border-bottom: 1px dashed #999;
          text-decoration: none; 
        }
    </style>
</head>
<body>
    <u class="dotted">I like cheese</u>
</body>
</html>
15
epascarello

Utilisez les codes CSS suivants ...

text-decoration:underline;
text-decoration-style: dotted;
14
Shakeel Ahmed

L'élément HTML5 peut donner un soulignement en pointillé afin que le texte situé en dessous ait une ligne en pointillé plutôt qu'un soulignement régulier. Et l'attribut title crée une info-bulle pour l'utilisateur lorsqu'il place son curseur sur l'élément:

NOTE: La bordure/soulignement en pointillé est affiché par défaut dans Firefox et Opera, mais IE8, Safari et Chrome nécessite une ligne de code CSS:

<abbr title="Hyper Text Markup Language">HTML</abbr>
5
Fatima Waheed

Reformaté la réponse par @ epascarello:

u.dotted {
  border-bottom: 1px dashed #999;
  text-decoration: none;
}
<!DOCTYPE html>
<u class="dotted">I like cheese</u>
3
anatoly techtonik

Si le contenu comporte plus d'une ligne, l'ajout d'une bordure inférieure ne vous aidera pas. Dans ce cas, vous devrez utiliser,

text-decoration: underline;
text-decoration-style: dotted;

Si vous voulez plus d’espace entre le texte et la ligne, utilisez simplement:

text-underline-position: under;
3
Darshana Gunawardana