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

效果如下

相关推荐
IT_陈寒21 分钟前
SpringBoot自动配置这个坑,我踩进去又爬出来了
前端·人工智能·后端
runnerdancer10 小时前
LLM是怎么处理messages数组的,提示词缓存又是什么
前端·agent
陈随易10 小时前
VSCode的Copilot扩展支持接入DeepSeek,Kimi了!
前端·后端·程序员
我不是外星人12 小时前
有了 Harness Engineering ,真的还需要研发工程师吗?
前端·后端·ai编程
IT_陈寒14 小时前
JavaScript的闭包把我坑惨了,说好的内存会自动回收呢?
前端·人工智能·后端
Jackson__15 小时前
分享一个横向滚动案例,带悬停暂停,通用性很强
前端
MariaH16 小时前
git rebase的使用
前端
_柳青杨16 小时前
深入理解 JavaScript 事件循环
前端·javascript
阡陌Jony16 小时前
关于前端性能优化的一些问题:
前端
用户6000718191017 小时前
【翻译】简化 TSRX
前端