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

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

javascript 复制代码
  <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>

效果如下

相关推荐
写不来代码的草莓熊38 分钟前
vue前端面试题——记录一次面试当中遇到的题(9)
前端·javascript·vue.js
JinSo1 小时前
pnpm monorepo 联调:告别 --global 参数
前端·github·代码规范
程序员码歌1 小时前
豆包Seedream4.0深度体验:p图美化与文生图创作
android·前端·后端
urhero1 小时前
工作事项管理小工具——HTML版
前端·html·实用工具·工作事项跟踪·任务跟踪小工具·本地小程序
二十雨辰1 小时前
eduAi-智能体创意平台
前端·vue.js
golang学习记1 小时前
从0死磕全栈之Next.js connection() 函数详解:强制动态渲染的正确姿势(附实战案例)
前端
郝学胜-神的一滴1 小时前
Three.js光照技术详解:为3D场景注入灵魂
开发语言·前端·javascript·3d·web3·webgl
m0dw1 小时前
vue懒加载
前端·javascript·vue.js·typescript
国家不保护废物2 小时前
手写 Vue Router,揭秘路由背后的魔法!🔮
前端·vue.js
菜鸟‍2 小时前
【前端学习】仿Deepseek官网AI聊天网站React
前端·学习·react.js