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以设置下划线的厚度和颜色。
相关推荐
硅谷工具人13 小时前
vue3边学边做系列(3)-路由缓存接口封装
前端·缓存·前端框架·vue
β添砖java15 小时前
CSS网格布局
前端·css·html
木易 士心16 小时前
Ref 和 Reactive 响应式原理剖析与代码实现
前端·javascript·vue.js
程序员博博16 小时前
概率与决策 - 模拟程序让你在选择中取胜
前端
被巨款砸中16 小时前
一篇文章讲清Prompt、Agent、MCP、Function Calling
前端·vue.js·人工智能·web
sophie旭17 小时前
一道面试题,开始性能优化之旅(1)-- beforeFetch
前端·性能优化
Cache技术分享17 小时前
204. Java 异常 - Error 类:表示 Java 虚拟机中的严重错误
前端·后端
uhakadotcom17 小时前
execjs有哪些常用的api,如何逆向分析网站的加签机制
前端·javascript·面试
ObjectX前端实验室17 小时前
【图形编辑器架构】:无限画布标尺与网格系统实现解析
前端·canvas·图形学
你的电影很有趣17 小时前
lesson71:Node.js与npm基础全攻略:2025年最新特性与实战指南
前端·npm·node.js