CSS实现与文字长度相同的下划线

news2025/2/18 13:52:23

可以使用伪元素和一些样式属性来实现与文字长度相同的下划线。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Underline</title>
    <style>
        li {
            position: relative;
            display: inline-block; /* 使得li元素根据内容调整宽度 */
            padding-bottom: 5px; /* 为下划线留出空间 */
            margin: 5px 0; /* 添加一些垂直间距以便更好地查看效果 */
        }

        li::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%; /* 设置宽度为li元素的宽度 */
            height: 2px; /* 设置下划线的厚度 */
            background-color: black; /* 设置下划线的颜色 */
        }
    </style>
</head>
<body>
    <ul>
        <li>实现与文字长度相同的下划线</li>
    </ul>
</body>
</html>

在这个示例中，我们使用了::after伪元素来创建下划线。关键步骤包括：

将<li>元素设置为position: relative;，这样伪元素可以相对于<li>元素定位。
使用display: inline-block;确保<li>元素的宽度根据内容调整。
通过padding-bottom为下划线留出空间。
使用::after伪元素创建下划线，设置其width为100%以确保它与<li>元素的宽度一致，并调整height和background-color以设置下划线的厚度和颜色。