How to Add a Dotted Underline Beneath HTML Text
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.
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>
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>
Use the following CSS codes...
text-decoration:underline;
text-decoration-style: dotted;
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>
Reformatted the answer by @epascarello:
u.dotted {
border-bottom: 1px dashed #999;
text-decoration: none;
}<!DOCTYPE html>
<u class="dotted">I like cheese</u>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;
It's not impossible without CSS. For example as a list item:
<li style="border-bottom: 1px dashed"><!--content --></li>
참고URL : https://stackoverflow.com/questions/15252597/how-to-add-a-dotted-underline-beneath-html-text
'developer tip' 카테고리의 다른 글
| Expand Python Search Path to Other Source (0) | 2020.09.21 |
|---|---|
| Nullable vs. int? - Is there any difference? (0) | 2020.09.21 |
| Binding List to DataGridView in WinForm (0) | 2020.09.21 |
| How to make firefox headless programmatically in Selenium with python? (0) | 2020.09.21 |
| Inspecting standard container (std::map) contents with gdb (0) | 2020.09.21 |