如何在 HTML 文本下方添加虚线下划线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15252597/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Add a Dotted Underline Beneath HTML Text
提问by parap
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 文本加上下划线，以便文本下方的线条是虚线而不是标准下划线？最好，我想在不使用单独的 CSS 文件的情况下做到这一点。我是 html 的新手。
回答by Alfred Xing
It's impossible without CSS. In fact, the <u>tag is simply adding text-decoration:underlineto the text with the browser's built-in CSS.
没有 CSS，这是不可能的。事实上，<u>标签只是text-decoration:underline用浏览器的内置 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>
回答by Shakeel Ahmed
Use the following CSS codes...
使用以下 CSS 代码...
text-decoration:underline;
text-decoration-style: dotted;
回答by epascarello
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.
如果没有 CSS，您基本上只能使用图像标签。基本上制作文本的图像并添加下划线。这基本上意味着您的页面对屏幕阅读器毫无用处。
With CSS, it is simple.
使用 CSS，这很简单。
HTML:
HTML：
<u class="dotted">I like cheese</u>
CSS:
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>
回答by Fatima Waheed
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:
HTML5 元素可以提供虚线下划线，因此下面的文本将具有虚线而不是常规下划线。当用户将光标悬停在元素上时，title 属性会为用户创建一个工具提示：
NOTE:The dotted border/underline is shown by default in Firefox and Opera, but IE8, Safari, and Chrome need a line of CSS:
注意：在 Firefox 和 Opera 中默认显示虚线边框/下划线，但 IE8、Safari 和 Chrome 需要一行 CSS：
<abbr title="Hyper Text Markup Language">HTML</abbr>
回答by Darshana Gunawardana
If the content has more than 1 line, adding a bottom border won't help. In that case you'll have to use,
如果内容超过 1 行，添加底部边框将无济于事。在这种情况下，你将不得不使用，
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;
回答by anatoly techtonik
Reformatted the answer by @epascarello:
重新格式化@epascarello的答案：
u.dotted {
border-bottom: 1px dashed #999;
text-decoration: none;
}<!DOCTYPE html>
<u class="dotted">I like cheese</u>回答by Neel
You can use border bottom with dottedoption.
您可以使用带dotted选项的边框底部。
border-bottom: 1px dotted #807f80;
回答by Mona Jalal
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.
请注意，没有text-underline-position: under;你仍然会有一个虚线下划线，但这个属性会给它更多的喘息空间。
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.
这是假设您想使用内联样式将所有内容嵌入 HTML 文件中，而不是使用单独的 CSS 文件或标签。
回答by Davington III
It's not impossible without CSS. For example as a list item:
没有 CSS 并非不可能。例如作为列表项：
<li style="border-bottom: 1px dashed"><!--content --></li>
