大家好！今天要给大家分享的是CSS中两个被严重低估的"装饰神器"——::before和::after伪元素。这两个不起眼的CSS工具，能让你在不增加HTML标签的情况下，轻松实现各种炫酷效果，让你的网页设计瞬间提升一个level！话不多说，直接上干货！

一、会呼吸的动态渐变按钮

先来看一个最简单但效果炸裂的应用——动态渐变按钮。这种按钮在hover时会有呼吸般的色彩变化，特别适合青春风格的网站或活动专题页。

实现思路其实很简单：用::before伪元素创建一个比按钮本身大的渐变背景，然后通过CSS动画让它旋转起来，再配合hover效果调整大小和模糊度。核心代码如下：

.btn63{
  width: 140px;
  height: 54px;
  border: none;
  border-radius: 9px;
  background-color: transparent;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  cursor: pointer;
}
.btn63::before{
  content: '';
  width: 200px;
  height: 200px;
  position: absolute;
  background-image: linear-gradient(90deg, #FA8BFF 20%, #2BD2FF 50%, #2BFF88 80%);
  filter: blur(16px);
  animation: eff63 4s linear infinite;
}
.btn63::after{
  content: attr(data-text);
  font-size: 16px;
  font-weight: bold;
  color: rgba(0,0,0,0.6);
  position: absolute;
  transition: all .3s linear;
}
@keyframes eff63{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

这个技巧的关键在于把渐变背景和文字内容分离成两个伪元素，通过::before实现动态背景，::after显示文字，互不干扰。案例出处

二、高级感爆棚的引用样式

你还在用普通的引号来装饰引用文本吗？太out啦！试试这个用伪元素实现的自定义引用样式，瞬间让你的文章格调提升！

实现方法超级简单，用::before和::after分别添加左右引号，再给引号添加背景色和圆角，一个精致的引用样式就完成了：

blockquote::before, blockquote::after {
  content: open-quote;
  background-color: #cccccc;
  display: block;
  width: 60px;
  height: 60px;
  line-height: 1.618;
  font-size: 3em;
  border-radius: 100%;
  text-align: center;
  position: absolute;
}
blockquote::before {
  top: 0;
  left: 0;
}
blockquote::after {
  content: close-quote;
  bottom: 0;
  right: 0;
}

这种设计特别适合博客文章、名人名言展示等场景，让你的文字瞬间有了"话语权"！案例出处

三、低调又专业的镜像水印

想给图片添加水印保护版权，但又不想影响内容可读性？这个镜像水印技巧你一定需要！半透明效果加上水平翻转，既保护了版权又不影响阅读。

实现思路：用::before伪元素添加水印图片，通过transform: scaleX(-1)实现水平镜像，再调整透明度和层级：

.content-container {
  position: relative;
  width: 80%;
  max-width: 800px;
  margin: 50px auto;
  padding: 20px;
  background-color: #fff;
  overflow: hidden;
}
.content-container::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scaleX(-1);
  width: 300px;
  height: 200px;
  background-image: url('水印图片路径');
  background-size: contain;
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}

这个方法的好处是完全不影响原有HTML结构，水印不会阻挡用户交互，而且兼容性极好！案例出处

四、告别单调的自定义列表

默认的列表符号太丑？试试用伪元素自定义列表标记，星星、箭头、emoji...想放什么放什么，让你的列表瞬间活泼起来！

实现代码少到惊讶，只需几行CSS：

.custom-list li::before {
  content: '★'; /* 可以是任意符号、emoji或文字 */
  color: gold;  /* 颜色自定义 */
  margin-right: 5px; /* 与文字的间距 */
  font-weight: bold;
}

除了星星，你还可以用"→"、""、"●"等符号，甚至可以用FontAwesome图标！案例出处

五、会旋转的渐变卡片

最后给大家分享一个超酷的卡片效果——旋转渐变背景卡片。当鼠标悬停时，卡片背景会缓缓旋转，科技感十足！

实现原理：用::before创建一个比卡片大的渐变背景，通过animation让它旋转，再用::after添加一层黑色半透明遮罩，突出卡片内容：

.card {
  width: 200px;
  height: 280px;
  background: #07182E;
  position: relative;
  display: flex;
  place-content: center;
  place-items: center;
  overflow: hidden;
  border-radius: 20px;
}
.card::before {
  content: '';
  position: absolute;
  width: 100px;
  background-image: linear-gradient(180deg, rgb(0, 183, 255), rgb(255, 48, 255));
  height: 120%;
  animation: rotateDong 3s linear infinite;
}
.card::after {
  content: '';
  position: absolute;
  background: #000;
  inset: 5px;
  border-radius: 20px;
}
@keyframes rotateDong {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

这个效果特别适合产品展示、个人资料卡等场景，简单几行代码就能让你的页面动起来！案例出处

总结

CSS伪元素::before和::after真是被严重低估的设计神器！它们就像隐形的设计师，能在不增加HTML标签的情况下，为你的页面添加各种炫酷效果。无论是动态背景、自定义装饰，还是交互效果，都能轻松实现。

最重要的是，这些技巧兼容性好，实现简单，性能优秀。赶紧收藏起来，下次做项目的时候试试吧！你还有什么伪元素的创意用法？欢迎在评论区分享哦！