CSS 划线 - 绿叶网

在 CSS 中，我们可以使用 text-decoration 属性来定义文本的划线效果（包括下划线、删除线、顶划线）。

语法：

text-decoration: 关键字;

说明：

text-decoration 的取值有 3 种，如下表所示。

text-decoration 属性取值
取值	说明
none（默认值）	无划线效果
underline	下划线
line-through	中划线（删除线）
overline	顶划线

示例 1：CSS 定义划线效果

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        p:nth-child(1) { text-decoration: underline; }
        p:nth-child(2) { text-decoration: line-through; }
        p:nth-child(3) { text-decoration: overline; }
    </style>
</head>
<body>
    <p>这是 “下划线” 效果</p>
    <p>这是 “删除线” 效果</p>
    <p>这是 “顶划线” 效果</p>
</body>
</html>

页面效果如下图所示。

CSS 划线示例

分析：

我们都知道，超链接（a 元素）默认样式有下划线，如 “<a href="https://www.lvyenet.com">绿叶网</a>” 这一句代码，其效果如下图所示。

超链接的下划线

这种下划线效果是比较丑的，此时我们就可以使用 text-decoration: none; 去除了，请看下面例子。

示例 2：CSS 去除超链接下划线

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        p:nth-child(1) { text-decoration: underline; }
        p:nth-child(2) { text-decoration: line-through; }
        p:nth-child(3) { text-decoration: overline; }
        a { text-decoration: none; }
    </style>
</head>
<body>
    <a href="https://www.lvyenet.com">绿叶网</a>
</body>
</html>

页面效果如下图所示。

CSS 去除超链接下划线

text-decoration 是一个复合属性

text-decoration 是一个复合属性，它是以下属性的简写。

text-decoration-line: 设置线条的位置（例如 underline、line-through、overline）。
text-decoration-style: 设置线条的样式（例如 solid、dotted、dashed、wavy）。
text-decoration-color: 设置线条的颜色。
text-decoration-thickness: 设置线条的粗细。

例如，我们可以使用以下代码创建一个红色的、波浪形的下划线：

a {
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: red;
}