当前位置: 首页 > news >正文

使用原生css实现word目录样式,标题后面的...动态长度并始终在标题后方(生成点线)

目录生成点线,长度自动添加

  <div style="  display: flex;  position: relative; overflow: hidden;"><div style="flex: 1;position: relative;"><a style="  position: relative;  display: inline; line-height: 1.5;  z-index: 2;">css样式实现目录功能实现自动填充满容器剩余空间,并始终追随在文字后方<!-- 填充.....的容器 --><span style="position: absolute;left: 100%;bottom: 0.35em;width: 100vw;background-image: radial-gradient(circle, #7f8c8d 1px, transparent 1.5px);background-size: 6px 1.5px;background-repeat: repeat-x;height: 1.5px;z-index: 1;"></span></a></div></div>

效果如下

在这里插入图片描述

http://www.dtcms.com/a/333028.html

相关文章:

  • 第七十章:告别“手写循环”噩梦!Trainer结构搭建:PyTorch Lightning让你“一键炼丹”!
  • Codeforces Deque工艺
  • 用 FreeMarker 动态构造 SQL 实现数据透视分析
  • STM32学习笔记12-串口数据包收发FlyMcuST-LINK Utility
  • Shortest Routes II(Floyd最短路)
  • 管家婆辉煌系列试用版/期限说明
  • Shader开发(十三)理解片元插值
  • 淘米自动签到脚本
  • 大气负氧离子自动监测站:解密空气的科技密码
  • 有红帽认证证书可以0元置换华为openEuler-HCIA/HCIP认证
  • OpenSCA开源社区每日安全漏洞及投毒情报资讯|13th Aug. , 2025
  • MyBatis StatementHandler核心原理详解
  • Nginx反向代理Tomcat实战指南
  • mysql-DDLy语句案例
  • 基于asp.net#C##VUE框架的独居老人物资配送系统的设计与实现#sql server#visual studio
  • OpenZeppelin Contracts 架构分层分析
  • 基于机器学习的赌博网站识别系统设计与实现
  • 【计算机视觉与深度学习实战】02基于形态学的权重自适应图像去噪系统
  • 【车联网kafka】常用参数及其命令总结(第八篇)
  • 【展厅多媒体】数字展厅小知识:实物识别桌是什么?
  • 杂记 02
  • Java研学-SpringCloud(四)
  • YOLO12 改进、魔改|幅度感知线性注意力MALA,提升小目标、遮挡的检测能力
  • FDBus CBaseWork运行在当前线程
  • AKShare开源金融数据接口库 | 1、介绍
  • 驱动-总线bus注册流程分析
  • QT开发中QString如何截取字符串
  • 怎样使用数据度量测试
  • Leetcode SQL基础50题
  • 旋钮键盘项目---foc讲解(开环)