CSS伪元素制作线条效果教程

本文深入讲解了如何巧妙运用CSS的::before伪元素在不增加HTML结构的前提下，高效创建各类装饰性线条——从标题下方居中短横线、渐变过渡的精致分隔线，到导航项间精准对齐的竖线装饰，全面覆盖定位（relative/absolute + transform）、尺寸控制、背景渐变及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;
}
<p>.title::before {
content: "";
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 60px;
height: 3px;
background-color: #007acc;
}</p>

• 给标题设置相对定位，让 ::before 可以相对于它定位
• 用 left: 50% 和 transform: translateX(-50%) 实现水平居中
• 高度和背景色构成一条蓝色短横线

3. 扩展样式：带圆角或渐变的线条

可以通过调整 CSS 属性实现更丰富的视觉效果。

.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;
}</p>

• 用字符 "|" 简单但不够可控；推荐用宽高+背景的方式
• vertical-align: middle 让线条与文字垂直对齐

基本上就这些方法，灵活运用 position、尺寸和背景，就能做出各种装饰线条效果。关键是理解 ::before 的生成机制和定位方式。

本篇关于《CSS伪元素制作线条效果教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！