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

效果如下

相关推荐
Zha0Zhun4 小时前
一个使用ViewBinding封装的Dialog
前端
兆子龙4 小时前
从微信小程序 data-id 到 React 列表性能优化:少用闭包,多用 data-*
前端
滕青山4 小时前
文本行过滤/筛选 在线工具核心JS实现
前端·javascript·vue.js
时光不负努力4 小时前
编程常用模式集合
前端·javascript·typescript
恋猫de小郭5 小时前
Apple 的 ANE 被挖掘,AI 硬件公开,宣传的 38 TOPS 居然是"数字游戏"?
前端·人工智能·ios
小岛前端5 小时前
Node.js 宣布重大调整,运行十年的规则要改了!
前端·node.js
OpenTiny社区5 小时前
OpenTiny NEXT-SDK 重磅发布:四步把你的前端应用变成智能应用
前端·javascript·ai编程
梦想CAD控件5 小时前
在线CAD开发包结构与功能说明
前端·javascript·vue.js
张拭心5 小时前
春节后,有些公司明确要求 AI 经验了
android·前端·人工智能
时光不负努力5 小时前
typescript常用的dom 元素类型
前端·typescript