How to Add a Dotted Underline Beneath HTML Text

Html Problem Overview

How do you underline html text so that the line beneath the text is dotted rather than the standard underline? Preferably, I would like to do this without using a separate CSS file. I'm a novice at html.

Html Solutions

Solution 1 - Html

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>

Solution 2 - Html

Use the following CSS codes...

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

Solution 3 - Html

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>

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

Solution 5 - Html

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;

Solution 6 - Html

Reformatted the answer by @epascarello:

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

I like cheese

Solution 7 - Html

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

Solution 8 - Html

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

Solution 9 - Html

You can make use of text-decoration properties:

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

Solution 10 - Html

You can use border bottom with dotted option.

border-bottom: 1px dotted #807f80;

Solution 11 - Html

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

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

Content Type	Original Author	Original Content on Stackoverflow
Question	parap	View Question on Stackoverflow
Solution 1 - Html	Alfred Xing	View Answer on Stackoverflow
Solution 2 - Html	Shakeel Ahmed	View Answer on Stackoverflow
Solution 3 - Html	epascarello	View Answer on Stackoverflow
Solution 4 - Html	Fatima Waheed	View Answer on Stackoverflow
Solution 5 - Html	Darshana Gunawardana	View Answer on Stackoverflow
Solution 6 - Html	anatoly techtonik	View Answer on Stackoverflow
Solution 7 - Html	BarryCap	View Answer on Stackoverflow
Solution 8 - Html	Mona Jalal	View Answer on Stackoverflow
Solution 9 - Html	bishal	View Answer on Stackoverflow
Solution 10 - Html	Neel	View Answer on Stackoverflow
Solution 11 - Html	Davington III	View Answer on Stackoverflow