CSS实现与笔墨长度类似的下划线

农民  论坛元老 | 2025-2-14 17:16:46 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1017|帖子 1017|积分 3051

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

x
可以使用伪元素和一些样式属性来实现与笔墨长度类似的下划线。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Text Underline</title>
  7.     <style>
  8.         li {
  9.             position: relative;
  10.             display: inline-block; /* 使得li元素根据内容调整宽度 */
  11.             padding-bottom: 5px; /* 为下划线留出空间 */
  12.             margin: 5px 0; /* 添加一些垂直间距以便更好地查看效果 */
  13.         }
  15.         li::after {
  16.             content: '';
  17.             position: absolute;
  18.             left: 0;
  19.             bottom: 0;
  20.             width: 100%; /* 设置宽度为li元素的宽度 */
  21.             height: 2px; /* 设置下划线的厚度 */
  22.             background-color: black; /* 设置下划线的颜色 */
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27.     <ul>
  28.         <li>实现与文字长度相同的下划线</li>
  29.     </ul>
  30. </body>
  31. </html>
复制代码
在这个示例中，我们使用了::after伪元向来创建下划线。关键步骤包罗：

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

农民

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表