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.
411 Answers
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> Use the following CSS codes...
text-decoration:underline; text-decoration-style: dotted; 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>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>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> 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; Reformatted the answer by @epascarello:
u.dotted { border-bottom: 1px dashed #999; text-decoration: none; }<!DOCTYPE html> <u>I like cheese</u>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>I have a dotted underline</u>For a dashed underline, use text-decoration: underline dashed.
<u>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>I have a dotted underline</u>In a separate CSS file
u { text-decoration: underline dotted; } You can try this method:
<h2>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.
You can make use of text-decoration properties:
text-decoration: underline; text-decoration-style: dotted; text-decoration-line: underline; text-decoration-thickness: 1px; You can use border bottom with dotted option.
border-bottom: 1px dotted #807f80; It's not impossible without CSS. For example as a list item:
<li><!--content --></li> 
