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;
}
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>
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>
It's not impossible without CSS. For example as a list item:
<li style="border-bottom: 1px dashed"><!--content --></li>
Reformatted the answer by @epascarello:
u.dotted {_x000D_
border-bottom: 1px dashed #999;_x000D_
text-decoration: none;_x000D_
}<!DOCTYPE html>_x000D_
<u class="dotted">I like cheese</u>You can use border bottom with dotted option.
border-bottom: 1px dotted #807f80;
Use the following CSS codes...
text-decoration:underline;
text-decoration-style: dotted;
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.
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;
Source: Stackoverflow.com