当前位置：首页 > 文章列表 > 文章 > 前端 > CSS悬停装饰技巧：hover与before动态效果

CSS悬停装饰技巧：hover与before动态效果

2025-10-13 16:43:42 0浏览收藏

基本原理说明

::before 是伪元素，用于在目标元素内容前插入装饰性内容，通常配合 content 属性使用。:hover 是伪类，用于定义鼠标悬停时的样式状态。将两者结合，可实现“默认隐藏 → 悬停显示”的动画或过渡效果。

常见实现方式

以下是几种实用的悬停装饰技巧：

● 下划线滑动出现

适用于导航链接，下划线从中心或一侧滑入：

a {
  position: relative;
  text-decoration: none;
  color: #000;
}

a::before {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 50%;
  background-color: #007acc;
  transition: width 0.3s ease, left 0.3s ease;
}

a:hover::before {
  width: 100%;
  left: 0;
}

● 背景色块覆盖

悬停时从底部升起一个色块，营造“浮现”感：

.card {
  position: relative;
  display: inline-block;
  padding: 20px;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: #007acc;
  opacity: 0;
  transition: top 0.4s ease, opacity 0.4s ease;
  z-index: -1;
}

.card:hover::before {
  top: 0;
  opacity: 1;
}

● 图标或符号浮现

在文字前添加箭头或圆点等装饰图标：

.button {
  position: relative;
  padding: 10px 15px;
}

.button::before {
  content: '→';
  margin-right: 8px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.button:hover::before {
  opacity: 1;
}