文章/答案/技术大牛

发布

css代码下划线

CSS代码下划线基础概念

CSS（Cascading Style Sheets）是一种用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的样式表语言。下划线通常用于文本装饰，可以通过CSS的text-decoration属性来实现。

类型

在CSS中，text-decoration属性可以设置为以下几种值：

none：默认值，无装饰。
underline：添加下划线。
overline：添加上划线。
line-through：添加删除线。
blink：闪烁（不推荐使用，因为可能影响用户体验）。

应用场景

下划线常用于以下场景：

链接：表示可点击的链接。
强调：用于强调某些文本。
标记：用于标记特殊文本，如待办事项。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Underline Example</title>
    <style>
        .underline-text {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <p>This is a normal text.</p>
    <p class="underline-text">This text has an underline.</p>
</body>
</html>

参考链接

MDN Web Docs: text-decoration

常见问题及解决方法

问题：为什么下划线不显示？

原因：

样式未正确应用：可能是CSS选择器错误或样式未正确加载。
覆盖问题：其他样式覆盖了下划线样式。
浏览器兼容性：某些浏览器可能不完全支持某些CSS属性。

解决方法：

检查选择器：确保CSS选择器正确匹配目标元素。
检查选择器：确保CSS选择器正确匹配目标元素。
检查样式加载：确保CSS文件正确链接并加载。
检查样式加载：确保CSS文件正确链接并加载。
浏览器兼容性：使用浏览器前缀或检查浏览器支持情况。
浏览器兼容性：使用浏览器前缀或检查浏览器支持情况。

通过以上方法，可以解决CSS下划线不显示的问题。

页面内容是否对你有帮助？

有帮助

没帮助

锚标记文本下划线不会出现在页面上

html、css

我的HTML代码是：元素不直接位于body标记下面。现在，我需要使用 css 在锚标记文本下划线上下划线，为此我使用以下css代码：但是，这只突出了锚标记中所包含的文本。如果希望下划线横过页面怎么办？

浏览 1提问于2016-01-13得票数 0

回答已采纳

3回答

在标记中使用下划线创建css工具提示格式问题

css、hover

我正在尝试创建一个纯css工具提示。我这里有测试代码：唯一的问题是，在Chrome中，尽管在css中有text-decoration: none;行，但文本在工具提示上是下划线的。链接应加下划线，但.tooltip文本不应加下划线。

浏览 1提问于2011-07-01得票数 3

回答已采纳

2回答

我希望我的链接被加下划线，但只有当我真的在那个页面的时候

html、css、hyperlink、navigation、styles

我如何才能让一个链接在我当时所在的位置下划线。(这是在我的导航中，所以当我实际访问我的“主页”或“关于我们”页面时，我希望链接被加下划线，但仅在那时。使用CSS可以做到这一点吗？

浏览 18提问于2021-08-27得票数 1

3回答

更改样式输出，使其不带下划线

html、css

我刚接触CSS / HTML，很抱歉问这个问题。我想有一个CSS / HTML代码，使单词“测试”没有下划线，但我仍然发现在网页上的下划线，会建议如何改变它，使其工作？

浏览 1提问于2014-05-16得票数 0

4回答

CSS链接不能正常工作

html、css、hyperlink、href

对于style.css中这个div中的链接，有以下代码：证据: berdyanskaya56.ru 56.ruUPD：->目标:在div“请求”中建立链接，当没有悬停和悬停时，使虚线-下线。链接的所有属性都应该用

浏览 2提问于2014-10-30得票数 2

回答已采纳

2回答

jquery悬停在wordpress中不能正常工作

javascript、jquery、html、css、wordpress

这是我的代码：a.hover( jQuery(this).css({"text-decoration":"none"}); function() { jQuery(this).css({"text-decoration":"underline

浏览 6提问于2015-01-24得票数 1

回答已采纳

2回答

如何实现切换效果，以显示下划线在盘旋的反应路由器链路？

javascript、css、reactjs、react-router-dom

在设置路由器链接之后，默认情况下，我使用以下自定义CSS隐藏链接下划线： TextLink: {任何附加节点包的修改CSS或代码示例都会有帮助。

浏览 0提问于2018-08-07得票数 1

回答已采纳

6回答

文字装饰:没有人不移除文字装饰

javascript、jquery、css、css-specificity

考虑以下代码HTML:CSS:{} 现在我希望Home有一个下划线，而上标[2]没有下划线。但恰好上标也得到了下划线。我在这里错过了什么？？

浏览 7提问于2011-08-18得票数 7

回答已采纳

5回答

字体图标在链接中有文字装饰问题。

html、css、font-awesome、text-decorations

通过悬停图标，图标本身将不会得到下划线，但不知何故，文字和图标之间的空间。不知何故，链接中的文本装饰css规则(下划线同时悬停)与这个奇怪的出现空间中来自图标的css规则发生了冲突。我怎样才能在空间中去掉这些下划线，而最终却没有任何装饰？(如果可能，不向链接元素添加类，也不使用JS)hover {} <link href="https://maxcdn.

浏览 10提问于2016-09-12得票数 4

回答已采纳

1回答

如何删除IE中锚伪元素的css下划线

css、internet-explorer、pseudo-element

如何删除Internet中CSS伪元素的text-decoration: underline？ text-decoration:underline;h3 a:before { content: '+';

浏览 0提问于2016-03-22得票数 2

回答已采纳

3回答

ruby regex :匹配任何不以下划线开头、位于任何字符串之前的.css文件名

ruby、regex、expression

我正在尝试弄清楚如何匹配任何.css文件名，而不是以下划线开头，在任何字符串之前。但是，此正则表达式仅匹配不带下划线的filename.css。我希望有一个正则表达式，可以匹配文件名之前的任何路径，不带下划线。以下字符串应匹配：application.css.scss /assets/stylesheets&

浏览 0提问于2013-05-27得票数 3

回答已采纳

2回答

jQuery -文本-装饰下划线切换

javascript、jquery、toggle

当我点击链接时，链接应该加下划线，如果我第二次单击链接，则不应该加下划线。如果第一个链接被点击一次，那么第三个链接被点击，第一个链接就不应该加下划线等等，它也应该切换。jQuery代码： if($(".underlinetoggle").css('text-decoration', 'none')) { $(&qu

浏览 2提问于2014-08-09得票数 0

回答已采纳

2回答

找到匹配的单词并在它们下面划线-但只在单词下划线

javascript、jquery、string、replace

我在下面的代码中尝试搜索并在指定单词的所有实例下划线： $(".test:contains('moon')").css("text-decoration", "underline"); <scriptjquery/3.3.1/jquery.min.js"></script> <div class="test">The cow jumped over the moo

浏览 29提问于2019-10-17得票数 0

回答已采纳

1回答

Sass将多个scss文件转换为css

css、sass

我必须将它们全部转换为.css，维护相同的目录结构。base.scss |- themes |- _dark.scsssass --watch scss:csssass --update `pw

浏览 3提问于2014-08-27得票数 10

回答已采纳

4回答

为什么css文本对齐:居中，而不是居中文本？使用相同格式的下划线是有效的

css、text-alignment、text-align

我使用w3schools示例编写了简单的CSS来对齐文本： text-align:center 当我以相同的格式添加下划线时，下划线起作用。下面是代码片段： .CenterIt {} text-decoration:underline;</span>

浏览 42提问于2019-09-09得票数 2

回答已采纳

1回答

局部Sass文件中的下划线

sass、gulp-sass

.scss部分文件是否必须以下划线开头？文档指出，分部应以下划线开头，因为否则该文件将编译为CSS文件。然而，我注意到gulp-sass可以将不带下划线的文件编译成一个完整的CSS文件。

浏览 4提问于2015-07-09得票数 44

回答已采纳

1回答

我试图在RMarkdown中显示一个带有两个下划线的公式(一个在{}-bracket中)。Rstudio中的预览按预期工作，并正确地呈现公式。但是，在呈现的文档(HTML)中，代码没有正确呈现，而是将下划线之间的部分用斜体表示，就好像它们是普通文本，而不是在公式环境中。w = \frac{1}{x_1}\sum y_{1} 它被呈现为我们看到，下划线之间的部分以斜体显示，公式没有呈现，但显示了源代码。解决方案是转义下划线(中断预览，但正确呈

浏览 3提问于2020-05-29得票数 1

回答已采纳

5回答

创建不带下划线的HyperLinks

html、css

clickme将创建一个超链接，但click me将带有下划线...如何创建一个超链接，其中的链接将不是underlined..Should我正在使用css?？谢谢

浏览 6提问于2011-05-24得票数 2

1回答

引导程序图示符上的链接

html、css、twitter-bootstrap

我有以下rails代码 <%= content_tag(:i, "" ,:class=>' icon-eye-open' %><a href="/mypath"></a>问题是，正如在中看到的，当鼠标移到图标上时，在数

浏览 1提问于2013-06-05得票数 8

回答已采纳

2回答

HTML下划线电子邮件

html、email、outlook、signature、underline

我试图删除电子邮件签名的链接下划线，但有困难。我尝试过不同的方法，比如让它出现在href的样式中，让它多次出现在CSS的跨度中，再到使用litmus建议的“applelinks”方法。Mac和pc对此显示了不同的结果，因为其中一个在一个系统上显示得很好，但在另一个系统上就不行了，比如可链接的href代码在苹果产品中会有下划线，但在PC上看起来很好，相反的是没有href链接，只是写出了链接-这在苹果设备上看起来很好，但在PC上看起来是蓝色的和下划线的。通过检查代码，我注意到这似乎是由于ou

浏览 1提问于2016-10-04得票数 1

点击加载更多