CSS 文字加下划线|极客教程

CSS 文字加下划线

在网页设计中，文字下划线是一种常见的装饰效果，可以用来强调文字内容或者为链接添加样式。在 CSS 中，我们可以通过简单的代码实现文字下划线效果。本文将详细介绍如何使用 CSS 来为文字添加下划线，并提供多个示例代码供参考。

1. 使用 text-decoration 属性添加下划线

在 CSS 中，可以使用 text-decoration 属性来为文字添加下划线。该属性有以下几个取值：

none：默认值，不添加下划线
underline：添加下划线
overline：添加上划线
line-through：添加删除线

下面是一个简单的示例代码，演示如何使用 text-decoration 属性为文字添加下划线：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Underline Example</title>
<style>
    .underline {
        text-decoration: underline;
    }
</style>
</head>
<body>
    <p class="underline">This is a text with underline.</p>
</body>
</html>

Output:

CSS 文字加下划线

在上面的示例中，我们为  元素添加了一个类名为 underline，并在 CSS 中设置了 text-decoration: underline;，从而为文字添加了下划线效果。

2. 使用 border-bottom 属性模拟下划线

除了使用 text-decoration 属性外，还可以使用 border-bottom 属性来模拟文字下划线效果。这种方法可以更灵活地控制下划线的样式、颜色和粗细。

下面是一个示例代码，演示如何使用 border-bottom 属性为文字添加下划线：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Underline Example</title>
<style>
    .underline {
        border-bottom: 1px solid black;
    }
</style>
</head>
<body>
    <p class="underline">This is a text with underline.</p>
</body>
</html>

Output:

CSS 文字加下划线

在上面的示例中，我们为  元素添加了一个类名为 underline，并在 CSS 中设置了 border-bottom: 1px solid black;，从而为文字添加了下划线效果。

3. 使用 ::after 伪元素添加下划线

另一种常见的方法是使用 ::after 伪元素来为文字添加下划线。这种方法可以更灵活地控制下划线的位置和样式。

下面是一个示例代码，演示如何使用 ::after 伪元素为文字添加下划线：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Underline Example</title>
<style>
    .underline {
        position: relative;
    }
    .underline::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: black;
    }
</style>
</head>
<body>
    <p class="underline">This is a text with underline.</p>
</body>
</html>

Output:

CSS 文字加下划线

在上面的示例中，我们为  元素添加了一个类名为 underline，并使用 ::after 伪元素来创建一个绝对定位的元素，从而实现文字下方的下划线效果。

4. 使用 background-image 属性添加下划线

除了上述方法外，还可以使用 background-image 属性为文字添加下划线。这种方法可以实现更加复杂的下划线效果，如虚线、双线等。

下面是一个示例代码，演示如何使用 background-image 属性为文字添加下划线：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Underline Example</title>
<style>
    .underline {
        background-image: linear-gradient(to right, black, black);
        background-position: bottom;
        background-size: 100% 1px;
        background-repeat: no-repeat;
    }
</style>
</head>
<body>
    <p class="underline">This is a text with underline.</p>
</body>
</html>

Output:

CSS 文字加下划线

在上面的示例中，我们为  元素添加了一个类名为 underline，并使用 background-image 属性来创建一个线性渐变背景，从而实现文字下方的下划线效果。

5. 使用 text-decoration-color 属性设置下划线颜色

在 CSS3 中，新增了 text-decoration-color 属性，可以用来设置文字下划线的颜色。这样可以实现下划线与文字颜色不同的效果。

下面是一个示例代码，演示如何使用 text-decoration-color 属性设置下划线颜色：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Underline Example</title>
<style>
    .underline {
        text-decoration: underline;
        text-decoration-color: red;
    }
</style>
</head>
<body>
    <p class="underline">This is a text with red underline.</p>
</body>
</html>

Output:

CSS 文字加下划线

在上面的示例中，我们为  元素添加了一个类名为 underline，并使用 text-decoration-color: red; 来设置下划线的颜色为红色。

6. 使用 text-decoration-style 属性设置下划线样式

除了颜色外，还可以使用 text-decoration-style 属性来设置下划线的样式，如实线、虚线、双线等。

下面是一个示例代码，演示如何使用 text-decoration-style 属性设置下划线样式：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Underline Example</title>
<style>
    .underline {
        text-decoration: underline;
        text-decoration-style: dotted;
    }
</style>
</head>
<body>
    <p class="underline">This is a text with dotted underline.</p>
</body>
</html>

Output:

CSS 文字加下划线

在上面的示例中，我们为  元素添加了一个类名为 underline，并使用 text-decoration-style: dotted; 来设置下划线的样式为虚线。

7. 使用 text-decoration-thickness 属性设置下划线粗细

在 CSS4 中，新增了 text-decoration-thickness 属性，可以用来设置文字下划线的粗细。这样可以实现不同粗细的下划线效果。

下面是一个示例代码，演示如何使用 text-decoration-thickness 属性设置下划线粗细：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Underline Example</title>
<style>
    .underline {
        text-decoration: underline;
        text-decoration-thickness: 2px;
    }
</style>
</head>
<body>
    <p class="underline">This is a text with thick underline.</p>
</body>
</html>

Output:

CSS 文字加下划线

在上面的示例中，我们为  元素添加了一个类名为 underline，并使用 text-decoration-thickness: 2px; 来设置下划线的粗细为 2 像素。

8. 使用 ::before 伪元素创建下划线

除了使用 ::after 伪元素外，还可以使用 ::before 伪元素来创建文字下划线。这种方法可以实现更多样化的下划线效果。

下面是一个示例代码，演示如何使用 ::before 伪元素创建文字下划线：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Underline Example</title>
<style>
    .underline {
        position: relative;
    }
    .underline::before {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: black;
    }
</style>
</head>
<body>
    <p class="underline">This is a text with underline created by ::before.</p>
</body>
</html>

Output:

CSS 文字加下划线

在上面的示例中，我们为  元素添加了一个类名为 underline，并使用 ::before 伪元素来创建一个绝对定位的元素，从而实现文字下方的下划线效果。

9. 使用 text-underline-offset 属性调整下划线位置

在 CSS3 中，新增了 text-underline-offset 属性，可以用来调整文字下划线的位置。这样可以实现下划线与文字之间的间距效果。

下面是一个示例代码，演示如何使用 text-underline-offset 属性调整下划线位置：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Underline Example</title>
<style>
    .underline {
        text-decoration: underline;
        text-underline-offset: 5px;
    }
</style>
</head>
<body>
    <p class="underline">This is a text with underline offset.</p>
</body>
</html>

Output:

CSS 文字加下划线

在上面的示例中，我们为  元素添加了一个类名为 underline，并使用 text-underline-offset: 5px; 来调整下划线与文字之间的间距为 5 像素。

10. 使用 ::selection 伪元素设置选中文字下划线

在 CSS 中，可以使用 ::selection 伪元素来设置选中文字的样式，包括下划线。这样可以为选中的文字添加特殊的样式效果。

下面是一个示例代码，演示如何使用 ::selection 伪元素设置选中文字的下划线：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Underline Example</title>
<style>
    ::selection {
        text-decoration: underline;
    }
</style>
</head>
<body>
    <p>Select this text to see the underline effect.</p>
</body>
</html>