css 鼠标经过标签时 底部边框加动画效果

可以使用CSS3的过渡（transition）和伪类（:hover）来实现鼠标经过标签时底部边框加动画效果。下面是一个示例代码：

<ul>
  <li><a href="#">标签1</a></li>
  <li><a href="#">标签2</a></li>
  <li><a href="#">标签3</a></li>
</ul>

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
  position: relative;
}

a {
  color: #333;
  text-decoration: none;
  padding-bottom: 5px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease-in-out;
}

a:hover {
  border-color: #f00;
}

这段代码实现了一个带有三个标签的无序列表。每个标签使用了一个链接（a元素），并且在标签下方设置了一个底部边框。a元素的底部边框初始状态为透明，同时设置了一个过渡效果（transition），当鼠标经过链接时，底部边框的颜色就会从透明变为红色（border-color属性），同时过渡时间为0.2秒（0.2s），过渡效果为缓入缓出（ease-in-out）。

注意到每个li元素都设置了position: relative，这是为了让a元素的底部边框可以相对于li元素进行定位。如果不设置position: relative，则底部边框将相对于其父元素进行定位。