可以使用伪元素和一些样式属性来实现与文字长度相同的下划线。
<!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以设置下划线的厚度和颜色。
