如何用css伪元素::before制作装饰线-css教程-PHP中文网

如何用css伪元素::before制作装饰线

P粉602998670

发布： 2025-10-29 23:10:01

原创

1007人浏览过

使用CSS ::before伪元素可高效添加装饰线。通过设置content属性并结合定位、尺寸和背景等样式，能在不增加HTML标签的情况下，为标题或文本添加水平线、垂直线或渐变分隔符，提升界面设计感与可读性。

如何用css伪元素::before制作装饰线

使用CSS伪元素 ::before 制作装饰线，是一种常见且高效的样式手段。它可以在不增加额外HTML标签的情况下，为元素添加视觉上的修饰线条，比如标题下方的横线、文字前的小竖线等。

基本原理

::before 伪元素用于在选定元素的内容之前插入生成的内容。通过设置 content 属性（即使为空），再配合其他样式如背景、边框、宽高等，就能实现装饰线效果。

注意：必须声明 content 属性，否则 ::before 不会生效。

制作水平装饰线（常用于标题）

适用于文章标题、章节标题等场景，让标题更具设计感。

示例代码：

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

.title {
  position: relative;
  padding-bottom: 10px;
  font-size: 24px;
}

.title::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 3px;
  background-color: #007acc;
}

登录后复制

说明：在标题下方添加一条蓝色短横线，通过 position: absolute 定位到标题底部左侧。

制作垂直装饰线或小圆点分隔符

可用于文字前的引导线、分类标签之间的分隔等。

如知AI笔记

如知笔记——支持markdown的在线笔记，支持ai智能写作、AI搜索，支持DeepseekR1满血大模型

查看详情

示例：文字前加一条竖线

.label {
  position: relative;
  padding-left: 15px;
  display: inline-block;
}

.label::before {
  content: '';
  position: absolute;
  top: 0;
  left: 5px;
  width: 2px;
  height: 100%;
  background-color: #ddd;
}

登录后复制

这条竖线作为视觉引导，增强可读性。

进阶技巧：渐变或带圆角的装饰线

提升设计质感，可以结合CSS渐变、圆角、阴影等属性。

例如使用线性渐变的装饰线：

.fancy-title::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #ff6b6b, #ffa502);
  border-radius: 2px;
}

登录后复制

这样会让装饰线更有活力，适合活泼风格的页面。

基本上就这些。合理使用 ::before 添加装饰线，能让界面更精致，同时保持HTML结构简洁。

以上就是如何用css 伪元素::before制作装饰线的详细内容，更多请关注php中文网其它相关文章！