a标签鼠标移到上面时下划线以三秒的速度滑动出现，鼠标移出后以三秒的速度滑动消失

可以使用CSS的transition属性来实现这个效果。首先给a标签设置一个默认的下划线样式，然后设置鼠标悬停时下划线的样式，再利用transition属性实现下划线滑动的效果。

HTML代码：

<a href="#">鼠标悬停时下划线滑动</a>

CSS代码：

a {
  position: relative;
  text-decoration: none;
  color: #000;
  font-size: 18px;
}

a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: #000;
  transition: width 3s;
}

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

解释：

1. 给a标签设置样式，包括相对定位、无下划线、黑色字体和字号等。

2. 通过在a标签的伪元素::after中添加一个绝对定位的矩形元素来实现下划线，初始宽度为0，高度为2px，背景色为黑色。并设置transition属性，实现下划线滑动的效果，时间为3s。

3. 当鼠标悬停在a标签上时，通过:hover伪类选择器来改变::after伪元素的宽度，使下划线滑动出现。当鼠标移开时，由于设置了transition属性，下划线会以3s的时间滑动消失。

相关问题

a标签鼠标移上面出现下划线

可以通过CSS来实现鼠标移上a标签时出现下划线的效果。可以使用:hover伪类来实现，具体代码如下：

a:hover {
  text-decoration: underline;
}

这样当鼠标移动到a标签上时，就会出现下划线效果。如果想要去掉a标签的下划线，可以将text-decoration属性设置为none，例如：

a {
  text-decoration: none;
}

这将会移除所有a标签的下划线效果。

怎么实现一个a标签鼠标移上去出现慢慢展开的下划线

您可以使用CSS的:hover伪类选择器来实现鼠标移上去出现慢慢展开的下划线。

首先，在a标签的CSS样式中设置下划线样式为透明（transparent）。

然后，使用:hover伪类选择器来设置鼠标移上去时的下划线样式。可以使用CSS的transition属性来实现慢慢展开的效果，例如设置transition: border-bottom 0.5s ease。

下面是一个示例代码：

a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

a:hover {
  border-bottom: 1px solid #000;
  transition: border-bottom 0.5s ease;
}

在这个示例代码中，a标签的下划线样式为透明，当鼠标移上去时，下划线慢慢展开，并且使用了0.5秒的过渡效果。您可以根据自己的需要调整样式的具体细节。