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

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

复制代码
<!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伪元素来创建下划线。关键步骤包括:

  1. <li>元素设置为position: relative;,这样伪元素可以相对于<li>元素定位。
  2. 使用display: inline-block;确保<li>元素的宽度根据内容调整。
  3. 通过padding-bottom为下划线留出空间。
  4. 使用::after伪元素创建下划线,设置其width100%以确保它与<li>元素的宽度一致,并调整heightbackground-color以设置下划线的厚度和颜色。
相关推荐
namekong81 小时前
清理谷歌浏览器垃圾文件 Chrome “User Data”
前端·chrome
开发者小天2 小时前
调整为 dart-sass 支持的语法,将深度选择器/deep/调整为::v-deep
开发语言·前端·javascript·vue.js·uni-app·sass·1024程序员节
李少兄5 小时前
HTML 表单控件
前端·microsoft·html
学习笔记1016 小时前
第十五章认识Ajax(六)
前端·javascript·ajax
消失的旧时光-19436 小时前
Flutter 异步编程:Future 与 Stream 深度解析
android·前端·flutter
曹牧7 小时前
C# 中的 DateTime.Now.ToString() 方法支持多种预定义的格式字符
前端·c#
勿在浮沙筑高台7 小时前
海龟交易系统R
前端·人工智能·r语言
歪歪1007 小时前
C#如何在数据可视化工具中进行数据筛选?
开发语言·前端·信息可视化·前端框架·c#·visual studio
Captaincc7 小时前
AI 能帮你写代码,但把代码变成软件,还是得靠人
前端·后端·程序员
繁花与尘埃8 小时前
CSS引入方式(本文为个人学习笔记,内容整理自哔哩哔哩UP主【非学者勿扰】的公开课程。 > 所有知识点归属原作者,仅作非商业用途分享)
css·笔记·学习