使用CSS ::before伪元素可灵活创建装饰线条。1. 必须设置content: “”并结合position、width、height和background等属性定义样式；2. 示例中通过绝对定位与transform实现标题下居中短横线；3. 扩展用渐变背景生成中间实两边透明的装饰线；4. 多段线可用竖线框模拟，配合vertical-align确保与文字对齐。
使用 CSS 的 ::before 伪元素制作装饰线条，是一种常见且灵活的前端技巧。它可以在不增加 HTML 标签的前提下，为元素添加视觉上的修饰线条，比如下划线、边框延伸、小横线等。
1. 基本原理与结构
::before 伪元素允许你在目标元素的内容前插入生成的内容，配合 content 属性和样式控制，可以绘制线条。
关键点：必须设置 content: “”（即使为空），否则 ::before 不会显示通常使用 position: absolute 定位，便于控制线条位置通过 width、height、background 或 border 来定义线条样式
2. 示例：标题下方的装饰短线
常用于文章标题或模块标题，增强设计感。
.title { position: relative; font-size: 24px; padding-bottom: 10px;}.title::before {content: "";position: absolute;left: 50%;bottom: 0;transform: translateX(-50%);width: 60px;height: 3px;background-color: #007acc;}
说明：给标题设置相对定位，让 ::before 可以相对于它定位用 left: 50% 和 transform: translateX(-50%) 实现水平居中高度和背景色构成一条蓝色短横线
3. 扩展样式：带圆角或渐变的线条
可以通过调整 CSS 属性实现更丰富的视觉效果。
Remove.bg
AI在线抠图软件，图片去除背景
174 查看详情
立即学习“前端免费学习笔记（深入）”；
.fancy-title::before { content: ""; position: absolute; left: 0; bottom: -10px; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, #007acc, transparent);}
特点：渐变背景让线条中间实，两边透明，更有设计感放在标题下方稍偏移的位置，形成装饰性分隔线
4. 多段装饰线或小竖线
适合用于导航项之间或标签前的小装饰。
.nav-item::before { content: "|"; color: #ccc; margin: 0 8px;}/ 或者用竖线框模拟 /.nav-item::before {content: "";display: inline-block;width: 1px;height: 1em;background-color: #ccc;margin: 0 6px;vertical-align: middle;}
提示：用字符 “|” 简单但不够可控；推荐用宽高+背景的方式vertical-align: middle 让线条与文字垂直对齐
基本上就这些方法，灵活运用 position、尺寸和背景，就能做出各种装饰线条效果。关键是理解 ::before 的生成机制和定位方式。
以上就是如何通过css::before制作装饰线条的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1000673.html
微信扫一扫 
支付宝扫一扫 
