如何通过css::before制作装饰线条-css教程-PHP中文网

如何通过css::before制作装饰线条

P粉602998670

发布： 2025-10-20 20:55:01

原创

648人浏览过

使用CSS ::before伪元素可灵活创建装饰线条。1. 必须设置content: ""并结合position、width、height和background等属性定义样式；2. 示例中通过绝对定位与transform实现标题下居中短横线；3. 扩展用渐变背景生成中间实两边透明的装饰线；4. 多段线可用竖线框模拟，配合vertical-align确保与文字对齐。

如何通过css::before制作装饰线条

使用 CSS 的 ::before 伪元素制作装饰线条，是一种常见且灵活的前端技巧。它可以在不增加 HTML 标签的前提下，为元素添加视觉上的修饰线条，比如下划线、边框延伸、小横线等。

1. 基本原理与结构

::before 伪元素允许你在目标元素的内容前插入生成的内容，配合 content 属性和样式控制，可以绘制线条。

关键点：

必须设置 content: ""（即使为空），否则 ::before 不会显示
通常使用 position: absolute 定位，便于控制线条位置
通过 width、height、background 或 border 来定义线条样式

2. 示例：标题下方的装饰短线

常用于文章标题或模块标题，增强设计感。

.title {
  position: relative;
  font-size: 24px;
  padding-bottom: 10px;
}
<p>.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 属性实现更丰富的视觉效果。

超能文献

超能文献是一款革命性的AI驱动医学文献搜索引擎。

105

查看详情

立即学习“前端免费学习笔记（深入）”；

.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;
}
<p>/<em> 或者用竖线框模拟 </em>/
.nav-item::before {
content: "";
display: inline-block;
width: 1px;
height: 1em;
background-color: #ccc;
margin: 0 6px;
vertical-align: middle;
}

登录后复制

提示：