HTML5添加横线的实用技巧分享

2、在CSS中定义该类：.line { border-top: 1px solid #ccc; }，即可生成顶部横线。

3、如需居中短横线，可配合 width、margin: 0 auto 设置宽度与居中；如需虚线，将 solid 替换为 dashed。

三、使用CSS伪元素生成横线

利用 ::before 或 ::after 伪元素，可在不增加HTML结构的前提下动态插入横线，适合装饰性分隔或响应式设计中的条件渲染。

1、选择目标元素（如标题），为其添加类名，例如：

简介

2、在CSS中编写：.title-with-line::after { content: ''; display: block; width: 60px; height: 2px; background: #333; margin: 8px auto 0; }。

3、确保父元素未设置 overflow: hidden，否则伪元素可能被裁剪。

四、使用SVG绘制高精度横线

SVG提供像素级控制能力，适用于需要抗锯齿、缩放不变形或动画横线的场景，尤其适合Retina屏幕或设计系统集成。

1、在HTML中嵌入内联SVG：。

2、将 width 设为 100% 可实现响应式延展，viewBox 保证线条比例恒定。

3、如需渐变横线，可用 定义 并赋给 stroke。

五、使用CSS渐变背景模拟横线

借助 background-image 的 linear-gradient 函数，可在任意元素上通过背景方式“画出”横线，兼容性强且易于复用。

1、为一个空

BOOKING网页版预订入口详解

上一篇

BOOKING网页版预订入口详解

下一篇

小红书上传慢怎么解决？优化网络技巧