当前位置： 首页 > article >正文

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

article 2026/4/24 14:45:33

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

<!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伪元素创建下划线，设置其width为100%以确保它与<li>元素的宽度一致，并调整height和background-color以设置下划线的厚度和颜色。

相关文章：

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

可以使用伪元素和一些样式属性来实现与文字长度相同的下划线。 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0">&…...

编程日记 2026/3/5 22:01:58

【工业安全】-CVE-2022-35561- Tenda W6路由器 栈溢出漏洞

文章目录 1.漏洞描述 2.环境搭建 3.漏洞复现 4.漏洞分析 4.1&#xff1a;代码分析 4.2&#xff1a;流量分析 5.poc代码&#xff1a; 1.漏洞描述 漏洞编号&#xff1a;CVE-2022-35561 漏洞名称&#xff1a;Tenda W6 栈溢出漏洞 威胁等级&#xff1a;高危 漏洞详情&#xff1…...

编程日记 2026/4/11 20:58:44

【GRPO】GRPO原理原文翻译

论文&#xff1a;DeepSeekMath: Pushing the Limits of Mathematical Reasoning in Open Language Models 注&#xff01;这里我仅仅翻译GRPO部分供学习使用。其他部分请去看原文。 4. 强化学习&#xff08;Reinforcement Learning&#xff09; 4.1. 群组相对策略优化&#xf…...

编程日记 2026/4/13 14:29:00

侯捷 C++ 课程学习笔记：C++ 新标准 11/14 的革新与实战应用

在侯捷老师的 C 系列课程中&#xff0c;《C 新标准 11/14》这门课程让我对现代 C 编程有了全新的认识。C11 和 C14 是 C 语言发展史上的重要里程碑&#xff0c;它们引入了大量新特性&#xff0c;极大地提升了语言的表达能力和开发效率。侯捷老师通过深入浅出的讲解和丰富的实战…...

编程日记 2026/4/11 21:01:00

拉取Openwrt官方源码 编译固件速通

Openwrt 24.10上星期出了&#xff0c;但是恩山没几个人更新&#xff0c;自己编译一个&#xff0c;记录一下方法。 一切从简&#xff0c;不添加任何插件&#xff0c;资源扔恩山了。 【　　　】红米AX6000 openwrt V24.10.0 uboot大分区固件-小米无线路由器及小米网络设备-恩山无…...

编程日记 2026/4/11 20:54:35

洗牌加速！车规MCU“冷热交加”

汽车芯片赛道&#xff0c;正在经历新一轮震荡期。 本周&#xff0c;全球汽车芯片巨头—NXP对外披露了不及资本市场预期的四季度的财报&#xff0c;营收同比下降9%&#xff0c;全年下降5%&#xff0c;表明工业和汽车市场需求的低迷仍在持续。 公开信息显示&#xff0c;该公司一…...

编程日记 2026/2/12 11:28:46

大模型Deepseek的使用_基于阿里云百炼和Chatbox

目录 前言1. 云服务商2. ChatBox参考 前言 上篇博文中探索了&#xff08;本地&#xff09;部署大语言模型&#xff0c;适合微调、数据高隐私性等场景。随着Deepseek-R1的发布&#xff0c;大语言模型的可及性得到极大提升&#xff0c;应用场景不断增加&#xff0c;对高可用的方…...

编程日记 2026/4/11 20:54:34

【prompt示例】智能客服+智能质检业务模版

本文原创作者&#xff1a;姚瑞南 AI-agent 大模型运营专家&#xff0c;先后任职于美团、猎聘等中大厂AI训练专家和智能运营专家岗&#xff1b;多年人工智能行业智能产品运营及大模型落地经验&#xff0c;拥有AI外呼方向国家专利与PMP项目管理证书。&#xff08;转载需经授权&am…...

编程日记 2025/12/2 13:07:21

DeepSeek 本地部署(电脑安装)

1.先安装Ollama 开源框架 网址链接为:Ollama 2.点中间的下载 3.选系统 4.下载好就安装 5.输入命令ollama -v 6.点击Model 7.选如下 8.选版本 9.复杂对应命令 10.控制台粘贴下载 11.就可以问问题啦 12.配置UI界面(在扩展里面输入) 13.配置完即可打开 14.选择刚才安装的就好啦…...

编程日记 2026/4/11 20:54:36

初学java 数据库相关学习

创建数据库&#xff1a; 主键: unsigned primary key auto_increment 外键: foreign key(xx) references table_name(xx) 字段: 类型: int ; tinyint ;char(20);varchar(255); date; datetime; text; float(5,2); double(10,2); long; decimal(15,10) 约束:primary key; foreig…...

编程日记 2026/2/19 15:37:34

【论文笔记】ZeroGS：扩展Spann3R+GS+pose估计

spann3r是利用dust3r做了增量式的点云重建&#xff0c;这里zeroGS在前者的基础上&#xff0c;进行了增量式的GS重建以及进行了pose的联合优化&#xff0c;这是一篇dust3r与GS结合的具有启发意义的工作。 abstract NeRF和3DGS是重建和渲染逼真图像的流行技术。然而&#xff0c;…...

编程日记 2026/4/11 21:12:11

《Python 中 JSON 的魔法秘籍：从入门到精通的进阶指南》

在当今数字化时代&#xff0c;网络编程无处不在&#xff0c;数据的高效传输与交互是其核心。JSON 作为一种轻量级的数据交换格式&#xff0c;凭借其简洁、易读、跨语言的特性&#xff0c;成为网络编程中数据传输与存储的关键技术。无论是前后端数据交互&#xff0c;还是不同系统…...

编程日记 2026/4/11 13:41:36

【漫话机器学习系列】091.置信区间（Confidence Intervals）

置信区间&#xff08;Confidence Intervals&#xff09;详解 1. 引言 在统计学和数据分析中&#xff0c;我们通常希望通过样本数据来估计总体参数。然而&#xff0c;由于抽样的随机性&#xff0c;我们不可能得到精确的总体参数&#xff0c;而只能通过估计值&#xff08;如均值…...

编程日记 2026/4/24 3:05:09

查看引脚电平

在Linux系统中&#xff0c;通过cat命令查看/sys/class/gpio/export文件并不能直接获取GPIO引脚的高低电平。/sys/class/gpio/export文件用于向系统请求导出&#xff08;即启用&#xff09;某个特定的GPIO引脚&#xff0c;而不是用于读取引脚的状态。 1.导出GPIO引脚&#xff1…...

编程日记 2026/4/4 8:29:34

回归预测 | Matlab实现PSO-HKELM粒子群算法优化混合核极限学习机多变量回归预测

回归预测 | Matlab实现PSO-HKELM粒子群算法优化混合核极限学习机多变量回归预测 目录 回归预测 | Matlab实现PSO-HKELM粒子群算法优化混合核极限学习机多变量回归预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.回归预测 | Matlab实现PSO-HKELM粒子群算法优化混合核…...

编程日记 2026/4/11 10:37:38

QTreeView添加网格线

一.效果 二.实现 网格线虽然可以用样式表添加，但效果不好。这里重写QTreeView的drawRow函数来实现网格线的绘制。 void QHTreeView::drawRow(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const {QTreeView::drawRow(painter…...

编程日记 2026/4/11 1:30:52

nvidia-smi执行失败，报错-实战生产

目录 报错日志 解决办法 步骤 1: 检查当前安装的 NVIDIA 驱动版本 步骤 2: 检查 NVIDIA 内核模块是否已加载 步骤 3: 重新安装 NVIDIA 驱动程序 使用 apt 重新安装驱动程序 或者使用 dkms 重新生成内核模块 步骤 4: 确认内核版本和驱动兼容性 步骤 5: 更新 initramfs …...

编程日记 2026/4/4 0:27:24

大脑神经网络与机器神经网络的区别

大脑神经网络（生物神经网络）与机器神经网络（人工神经网络，ANN）虽然名称相似，但在结构、功能、学习机制等方面存在显著差异。以下是两者的主要区别： 1. 基础结构与组成 大脑神经网络： 由 生物神经元（约860亿个）通过突触连接形成动态网络。 神经元通过电化学信号（动作…...

编程日记 2025/11/5 12:21:13

firewall-cmd --zone=public --list-ports 已经添加端口了但是仍无法访问

当您使用 firewall-cmd 命令在 Linux 系统中配置防火墙规则时&#xff0c;确保端口可以被访问通常涉及几个步骤。即使您已经使用 firewall-cmd 添加了端口&#xff0c;但仍可能遇到无法访问的问题。以下是一些解决步骤&#xff0c;帮助您确认和解决端口无法访问的问题&#xff…...

编程日记 2026/2/25 17:42:29

Golang的多团队协作编程模式与实践经验

Golang的多团队协作编程模式与实践经验 一、多团队协作编程模式概述 在软件开发领域&#xff0c;多团队协作编程是一种常见的工作模式。特别是对于大型项目来说&#xff0c;不同团队间需要协同合作&#xff0c;共同完成复杂的任务。Golang作为一种高效、并发性强的编程语言&…...

编程日记 2026/4/11 10:43:03

DevOps 进化论：腾讯云 CODING-TM 如何助力企业敏捷转型？

在当今数字化竞争激烈的时代&#xff0c;企业的软件开发模式正经历从传统开发向敏捷开发、DevOps 转型的深刻变革。如何在保证代码质量的同时&#xff0c;加快开发、测试与交付流程&#xff0c;成为众多企业研发团队面临的核心挑战。腾讯云 CODING-TM 作为一站式 DevOps 平台&a…...

编程日记 2026/2/21 6:09:11

前端骨架怎样实现

前端骨架屏&#xff08;Skeleton Screen&#xff09;是一种优化页面加载体验的技术&#xff0c;通常在内容加载时展示一个简易的占位符&#xff0c;避免用户看到空白页面。骨架屏通过展示页面结构的骨架样式&#xff0c;让用户有页面正在加载的感觉&#xff0c;而不是等待内容加…...

编程日记 2026/2/18 9:03:05

AI前端开发的学习成本与回报——效率革命的曙光

近年来&#xff0c;人工智能技术飞速发展&#xff0c;深刻地改变着各行各业。在软件开发领域&#xff0c;AI写代码工具的出现更是掀起了一场效率革命。AI前端开发&#xff0c;作为人工智能技术与前端开发技术的完美结合&#xff0c;正展现出巨大的发展潜力&#xff0c;为开发者…...

编程日记 2026/4/11 23:13:17

[NOIP2007 普及组] 奖学金 题解

&#xff08;一&#xff09;读懂题目 关键句&#xff1a;期末&#xff0c;每个学生都有3门课的成绩:语文、数学、英语。先按总分从高到低排序&#xff0c;如果两个同学总分相同&#xff0c;再按语文成绩从高到低排序&#xff0c;如果两个同学总分和语文成绩都相同&#xff0c;…...

编程日记 2026/2/18 11:13:48

[创业之路-297]：经济周期与股市、行业的关系

目录 一、经济周期的种类 1、短周期&#xff08;基钦周期&#xff09; 2、中周期&#xff08;朱格拉周期&#xff09; 3、长周期&#xff08;康德拉季耶夫周期&#xff09; 当下处于康波周期的哪个阶段&#xff1f; 4、建筑周期&#xff08;库涅茨周期&#xff09; 二、…...

编程日记 2026/4/17 7:35:00

Dav_笔记14：优化程序提示 HINTs -3

查询转换的提示 以下每个提示都指示优化程序使用特定的SQL查询转换&#xff1a; ■NO_QUERY_TRANSFORMATION ■USE_CONCAT ■NO_EXPAND ■REWRITE和NO_REWRITE ■MERGE和NO_MERGE ■STAR_TRANSFORMATION和NO_STAR_TRANSFORMATION ■事实和NO_FACT ■UNNEST和NO_UNNEST…...

编程日记 2026/4/11 23:31:15

递归乘法算法

文章目录 递归乘法题目链接题目详解解题思路&#xff1a;代码实现&#xff1a; 结语 欢迎大家阅读我的博客&#xff0c;给生活加点impetus&#xff01;&#xff01; 让我们进入《题海探骊》&#xff0c;感受算法之美&#xff01;&#xff01; 递归乘法 题目链接 在线OJ 题目…...

编程日记 2026/4/11 20:59:43

从当下到未来：蓝耘平台和 DeepSeek 应用实践的路径探索，勾勒 AI 未来新蓝图

我的个人主页 我的专栏&#xff1a;人工智能领域&#xff0c;希望能帮助到大家&#xff01;&#xff01;&#xff01;点赞&#x1f44d;收藏❤ 引言&#xff1a;AI 浪潮中的双引擎 在人工智能蓬勃发展的时代&#xff0c;蓝耘平台与 DeepSeek 宛如推动这一浪潮前进的双引擎。…...

编程日记 2026/4/11 20:57:44

非标准纸张Word文件无损转换为A4标准纸张的完整教程

在日常办公中，常会遇到需要将非标准纸张大小的Word文档（如A3、B5等）调整为A4标准尺寸的需求。直接修改Word页面设置可能导致排版错乱，而通过 Adobe Acrobat 的印前检查功能可实现内容格式无损缩放。以下是详细操作流程： 一、Word转PDF：保留原始布局 保存为PDF格式 在Word…...

编程日记 2026/2/21 13:15:48

Xlua中C#引用Lua变量，导致Lua侧的GC无法回收的原因及解决方法

1. 引用关系导致&#xff1a; 在 XLua 中&#xff0c;当 C# 端引用了 Lua 变量时&#xff0c;Lua 的垃圾回收器&#xff08;GC&#xff09;不会回收这些被引用的变量。这是因为 Lua 的 GC 机制是基于引用计数和标记 - 清除算法的。当 C# 端持有对 Lua 变量的引用时&#xff0c;…...

编程日记 2026/2/18 11:13:54