伪元素魔法：::before/::after创意用法-CSDN博客

本文链接：https://blog.csdn.net/wfsdmn/article/details/149507588

一、伪元素核心概念

1.1 基础语法解析

selector::before {
  content: "";
  /* 其他样式 */
}

selector::after {
  content: "";
  /* 其他样式 */
}

关键特性：

content属性为必填项（空字符串""也可）
默认是行内元素（可通过display修改）
不占用DOM节点但参与样式渲染

二、实用创意案例

2.1 自定义表单控件

/* 美化复选框 */
.checkbox input[type="checkbox"] {
  opacity: 0;
  position: absolute;
}

.checkbox label::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid #3498db;
  margin-right: 10px;
  vertical-align: middle;
}

.checkbox input:checked + label::after {
  content: "✓";
  position: absolute;
  left: 5px;
  color: #3498db;
}

2.2 悬浮提示框

.tooltip:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  white-space: nowrap;
}

<button class="tooltip" data-tooltip="点击提交表单">提交</button>

2.3 图片遮罩效果

.image-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom, 
    transparent 60%, 
    rgba(0,0,0,0.8)
  );
  z-index: 1;
}

三、动态内容生成

3.1 计数器应用

/* 自动编号 */
ol {
  counter-reset: section;
}

li::before {
  counter-increment: section;
  content: counters(section, ".") " ";
}

3.2 属性值展示

/* 显示链接URL（调试用） */
a::after {
  content: " (" attr(href) ")";
  font-size: 0.8em;
  color: #999;
}

3.3 多语言内容

[lang="en"]::before {
  content: "English: ";
  font-weight: bold;
}

[lang="zh"]::before {
  content: "中文：";
  font-weight: bold;
}

四、高级视觉效果

4.1 边框动画

.button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid transparent;
  transition: all 0.3s;
}

.button:hover::before {
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border-color: #3498db;
}

4.2 背景图案

/* 斜条纹背景 */
.element::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    45deg,
    #eee,
    #eee 10px,
    #fff 10px,
    #fff 20px
  );
  z-index: -1;
}

4.3 3D立体效果

.card::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 100%;
  height: 100%;
  background: #000;
  filter: blur(10px);
  opacity: 0.3;
  transform: translateZ(-20px);
}

五、性能优化指南

5.1 渲染性能考量

/* 避免昂贵操作 */
.element::before {
  /* 谨慎使用： */
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
  filter: blur(5px);
  border-radius: 50%;
  
  /* 推荐使用： */
  opacity: 0.9;
  transform: scale(1.02);
}

5.2 合理使用原则

内容与表现分离：仅用于装饰性内容
避免深层嵌套：不超过2层伪元素组合
移动端优化：减少复杂动画伪元素

六、企业级实战案例

6.1 数据可视化图表

/* 纯CSS柱状图 */
.bar-chart li {
  position: relative;
}

.bar-chart li::before {
  content: "";
  display: inline-block;
  height: 100%;
  width: var(--percentage);
  background: linear-gradient(to right, #4facfe, #00f2fe);
  position: absolute;
  left: 0;
  top: 0;
}

6.2 响应式图标系统

.icon::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-size: contain;
}

.icon-search::before {
  background-image: url("search.svg");
}

@media (prefers-color-scheme: dark) {
  .icon-search::before {
    background-image: url("search-white.svg");
  }
}

七、特殊场景解决方案

7.1 文本溢出省略

.truncate::after {
  content: "...";
  position: absolute;
  right: 0;
  bottom: 0;
  background: white; /* 遮盖原文本 */
  padding-left: 5px;
}

7.2 浮动元素清除

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

7.3 自定义滚动条

.scroll-container::scrollbar {
  width: 10px;
}

.scroll-container::scrollbar-thumb {
  background: #ccc;
}

/* 兼容方案 */
.scroll-container::-webkit-scrollbar {
  width: 10px;
}

八、创意实验室

8.1 霓虹文字效果

.neon::before {
  content: attr(data-text);
  position: absolute;
  color: #fff;
  text-shadow: 
    0 0 10px #0ff,
    0 0 20px #0ff,
    0 0 30px #0ff;
  animation: flicker 1.5s infinite alternate;
}

.neon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #0ff;
  z-index: -1;
  filter: blur(15px);
  opacity: 0.7;
}

8.2 全屏视频背景

.hero::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("video-poster.jpg") center/cover;
  z-index: -1;
}

.hero::after {
  content: "";
  display: block;
  padding-bottom: 56.25%; /* 16:9比例 */
}

下一篇预告：《现代CSS重置方案全解析》将深度对比：