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选择器分别设置展开前和展开后的下划线样式。

相关问题

css鼠标点击选中出现下划线

如果你想禁止鼠标点击选中出现下划线，可以使用CSS的`text-decoration`属性，将其值设置为`none`，示例代码如下：

/* 禁止鼠标点击选中出现下划线 */
a {
  text-decoration: none;
}

这样就可以禁止所有链接在被点击时出现下划线了。如果你只想禁止某些链接出现下划线，可以给这些链接添加一个特定的class，然后在CSS中设置相应的样式。例如：

<a href="#" class="no-underline">这个链接不会出现下划线</a>

/* 禁止某些链接鼠标点击选中出现下划线 */
.no-underline {
  text-decoration: none;
}

css鼠标移入出现下划线

你可以通过以下 CSS 代码实现鼠标移入时出现下划线的效果：

a:hover {
  text-decoration: underline;
}

这将在鼠标移动到链接上时，在链接下面显示一条下划线。你可以将 `a` 替换为你想要应用效果的元素选择器。