How to Add a Dotted Underline Beneath HTML Text

Question 1

It's impossible without CSS. In fact, the <u> tag is simply adding text-decoration:underline to the text with the browser's built-in CSS.

Here's what you can do:

<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>

Question 2

Use the following CSS codes...

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

Question 3

Without CSS, you basically are stuck with using an image tag. Basically make an image of the text and add the underline. That basically means your page is useless to a screen reader.

With CSS, it is simple.

HTML:

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

CSS:

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

Running Example

Example 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>

Question 4

HTML5 element can give dotted underline so the beneath text will have dotted line rather than regular underline. And the title attribute creates a tool tip for the user when they hover their cursor over the element:

NOTE: The dotted border/underline is shown by default in Firefox and Opera, but IE8, Safari, and Chrome need a line of CSS:

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

Question 5

If the content has more than 1 line, adding a bottom border won't help. In that case you'll have to use,

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

If you want more breathing space in between the text and the line, simply use,

text-underline-position: under;

Question 6

Reformatted the answer by @epascarello:

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

<!DOCTYPE html>
<u class="dotted">I like cheese</u>

Question 7

Maybe I’m a bit late, but just use text-decoration: underline dotted, it’s a single CSS property that you can use everywhere.

Inline HTML

<u style="text-decoration:underline dotted">I have a dotted underline</u>

For a dashed underline, use text-decoration: underline dashed.

<u style="text-decoration:underline dashed">I have a dashed underline</u>

As said by Darshana Gunawardana, you can use text-underline-position: under, to have more space between the text and the line:

<u style="text-decoration:underline dotted;text-underline-position:under">I have a dotted underline</u>

In a separate CSS file

u {
  text-decoration: underline dotted;
}

Question 8

You can try this method:

<h2 style="text-decoration: underline; text-underline-position: under; text-decoration-style: dotted">Hello World!</h2>

Please note that without text-underline-position: under; you still will have a dotted underline but this property will give it more breathing space.

This is assuming you want to embed everything inside an HTML file using inline styling and not to use a separate CSS file or tag.

Question 9

You can make use of text-decoration properties:

    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;

Question 10

You can use border bottom with dotted option.

border-bottom: 1px dotted #807f80;

Question 11

It's not impossible without CSS. For example as a list item:

<li style="border-bottom: 1px dashed"><!--content --></li>