使用原生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>

效果如下

相关推荐
LabVIEW开发4 小时前
LabVIEW 前面板装饰图形的格式选择与自定义选板添加
前端·labview·labview知识·labview功能·labview程序
掘金者阿豪4 小时前
GPT-6 Astra 来了,GPT-5.6 Sol 还值得用吗?聊聊 Coding、百万上下文、价格和 Plus/Pro
前端·后端
code 小楊4 小时前
腾讯开源 WeKnora 深度解析:RAG 问答 + ReAct Agent 推理 + 自动 Wiki 图谱,三位一体的企业级知识中台
前端·人工智能·开源·知识图谱
roamingcode4 小时前
让 AI 的回答「逐段说话」:react-streaming 的顺序流式渲染实践
前端·人工智能·react.js·codex
cidy_984 小时前
Main 正式环境合并说明
前端
万物智能4 小时前
开源鸿蒙内核配置与驱动三条路径—【万物智能之开源鸿蒙OpenHarmony系统实战开发系列教程】
前端·后端
hunterandroid4 小时前
Android 多渠道打包与 Gradle 构建优化实战
android·前端·kotlin
吴长建先生重名了4 小时前
用 MinIO 分布式存储模块一次讲清代码重构与整洁代码实
css
cidy_984 小时前
Develop 测试环境合并说明
前端
用户252632753474 小时前
如何实现MySQL多表联查
前端