记录一个css,实现下划线内容显示,支持文本多行显示

文章目录

概要

css代码

css 复制代码
  display: inline;

  /* 使用 text-decoration 创建下划线 */
  text-decoration: underline;
  text-decoration-color: rgba(255, 122, 0, 0.2);
  text-decoration-thickness: 4px;
  text-underline-offset: -2px; /* 调整下划线位置 */
  /* 让下划线穿过标点符号和括号 */
  -webkit-text-decoration-skip: none;
  text-decoration-skip-ink: none;

  /* 确保每行都有下划线 */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;

小结

本人自己记录所用。

相关推荐
IMPYLH3 分钟前
HTML 的 <head> 元素
前端·html
卸任23 分钟前
AI英语学习助手:从翻译工具到 AI 英语学习助手
前端·electron
计算机魔术师24 分钟前
A股人形机器人第一股来了!宇树科技8月19日上市,一签或赚20万
前端
PedroQue9930 分钟前
Vue Router 4.x风格导航守卫全面升级
前端·uni-app
cindershade35 分钟前
前端大文件上传完整方案:分片上传、断点续传、秒传与失败重试
前端
HjhIron38 分钟前
NestJS 入门指南:从工厂模式到模块化 CRUD 实战
前端·nestjs
HjhIron43 分钟前
手把手教你用 Next.js 14 + Redis 从零搭建一个全栈 Markdown 笔记系统
前端·全栈·next.js
WIN赢1 小时前
【抽象思想-从复杂中抽离简单、收敛的口子】
java·前端·javascript
martindelophy1 小时前
Codex Chrome 插件 + Timeline Studio:构建可编辑的 AI 视频剪辑 Agent 工作流
前端·人工智能·chrome