HTML怎么设置文字下划线_HTML文字下划线的CSStextDecoration属性用法

文字装饰：下划线；为文本添加下划线，避免使用旧的 标签，内联样式优于外部 CSS，并使用类选择器来优化性能。

如何仅用CSS和HTML为文字添加下划线点？

说实话，当我第一次接触到文字高亮功能时，我还以为这是一个新玩具。
这真的很有趣。
您可以使用 CSS 为文本添加点下划线。
你不需要JS或图片。
一切都是用纯 CSS 完成的。
我上次在为一个项目做文档注释时尝试过这个，我对结果非常满意。

基本步骤是三步：第一步是在CSS中编写.text-with-dot{text-emphasis:dot;}，这将在文本下方添加一个默认的点。
第二步，输入text-highlight-position:under;该点将位于文本下方，就像下划线一样。
第三步就更简单了，只需在HTML标签中添加一个类即可。
像这样：

<头> <风格> .dotted-text { 文本强调：句号； 文本强调位置：sub； } </风格> </头> <正文>

此文本下方有一条带点的下划线

</正文> </>
但是，使用时应该小心。
并非所有浏览器都这样。
我记得在 IE 或某些旧版本的 Edge 中尝试过，但屏幕一片空白。
上次我有一个客户使用遗留系统时，我添加了一个后备，如下所示：
css .dotted-text { 文本强调：句号； 文本强调位置：sub； } /替代计划/ .text-me-dot::after { 内容：'•'； 位置：绝对； 左：0； 底部：-3 px； 宽度：1 00%； 溢出：隐藏； 行高：0；
这样，当旧版浏览器不支持文本突出显示时，您仍然可以看到正常的下划线。
说实话，调整兼容性让我很头疼，尤其是text-emphasis-position:under;对于这个属性，不同浏览器的位置有较大差异。

有趣的是，这个属性不仅可以添加圆点，还可以添加圆形、三角形，甚至芝麻点。
我尝试了文本突出显示：关于；在Safari中效果很棒，像这样：
css .text-around { 文本突出显示：圆圈； 文本强调位置：sub； 文本突出显示颜色：红色；
颜色也可以改变，text-highlight-color属性使用起来非常方便。
不过，我只在最新版本的 Chrome 中尝试过 sesame（文字强调：sesame ;），而 Firefox 根本不支持，这相当令人沮丧。

缺点是这个东西很新，用的人很少。
上次我向团队提到它时，一位同事说：“谁可以使用这个？”但当这个要求真正发出来的时候，所有人都惊呆了。
此外，不同浏览器的点大小和间距差异很大，没有统一的标准。

我建议初学者尝试这个text-emphasis:dot;首先，代码简单直观。
如果项目需要高兼容性，不要忘记添加备份计划。
如果你真的想玩点花招，你可以尝试text-highlight-color，但你应该先检查浏览器支持表。
MDN 拥有最完整的信息，我上次检查属性值时就在那里找到了它。

最后，说实话，这个属性确实很酷，但别指望它会变得普遍。
就像CSS3 刚出来的时候，现在不是很流行吗？慢慢来。

html下划线怎么添加

这就是我要说的。
看看这个... 在 HTML 中添加下划线有两种方法。

首先，使用标签。
你看，就这么简单，戴上就可以了。
此文本带下划线 效果……被强调了。
正确的。
相当快。
但这个标签是一个老东西了，它是HTML4 在HTML5 中它不再是“强调”的意思，而是变成了“非文本注释”，就像中文专名的表示一样。
因此，如果您只想随机添加下划线并快速完成，可以使用 。
这没有什么问题。

其次，使用 CSS text-decoration 属性。
这太棒了。
看看这个：

此文本也带有下划线

效果……也被强调了。
但！你可以拿这个开玩笑。
例如，您想更改下划线颜色吗？ 此文本带有红色下划线 效果以红色突出显示。
另一个例子：您想更改下划线样式吗？就像虚线一样？

此文本带有蓝色虚线下划线

效果，蓝色虚线。
还是波浪线？

此文本带有绿色波浪线下划线

效果，绿色波浪线。
你看，CSS 是灵活的。

另外，如果与其他样式混合使用，例如加粗、调整间距等，则需要使用CSS。

红色波浪粗体下划线

效果，你看。

那么，如何选择呢？需求很简单，只是一个 标签和一段简短的代码。
对于复杂的需求，例如更改下划线的颜色和样式或与字体匹配等，请使用 CSS。

另请注意，如果您强调它是超链接，最好使用 标签而不是 或 CSS。
这是语义规则，明白了。
此外，CSS text-decoration-line 属性是后来出现的，并且得到了现代浏览器的支持。
如果您无法控制这一点并且担心旧版浏览器无法识别它，则只需使用文本装饰即可。
这是一个历史悠久的品牌，具有无与伦比的兼容性。

仅此而已。