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以设置下划线的厚度和颜色。
相关推荐
可爱的秋秋啊4 分钟前
vue3,element ui框架中为el-table表格实现自动滚动,并实现表头汇总数据
前端·vue.js·笔记·elementui
一夜枫林5 分钟前
uniapp自定义拖拽排列
前端·javascript·uni-app
IT瘾君2 小时前
JavaWeb:Html&Css
前端·html
264玫瑰资源库2 小时前
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)
java·开发语言·前端·游戏
喝拿铁写前端3 小时前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED3 小时前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪3 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程3 小时前
如何测试短信接口
java·服务器·前端
安冬的码畜日常4 小时前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程
小杨升级打怪中4 小时前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss