css鼠标悬浮出现中间展开的下划线

您可以使用CSS中的伪类选择器:hover和::after来实现鼠标悬浮出现中间展开的下划线效果。具体的CSS代码如下：

a {
  position: relative;
  text-decoration: none;
}

a:hover::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 0;
  height: 2px;
  background-color: #000;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
}

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

以上CSS代码中，我们使用了伪类选择器:hover来指定鼠标悬浮时的样式，使用了::after伪元素来添加下划线效果。具体实现方式是在链接a标签中设置position: relative属性，然后在a:hover::after中设置position: absolute属性，使得::after元素相对于a标签进行定位。接下来，我们设置::after元素的left和bottom属性，使其位于链接底部的中央位置，然后设置width和height属性来定义下划线的大小。我们还设置了transition属性来实现下划线展开的动画效果。最后，我们使用两个不同的a:hover::after选择器分别设置展开前和展开后的下划线样式。