css下划线触击时变长

在网页设计中，下划线是十分常见的一种装饰元素，可以用来强调文字内容和美化页面。而且，通过使用CSS技术，我们还可以实现下划线在被点击时变长的效果，让页面更加动态和生动。

a {
  text-decoration: none;
  position: relative;
}
a:hover:after {
  content: "";
  display: block;
  height: 2px;
  width: 0;
  background: #000;
  position: absolute;
  top: 100%;
  left: 0;
  transition: width 0.3s ease 0s;
}
a:hover {
  color: blue;
}
a:hover:after {
  width: 100%;
} 

以上是实现下划线触击变长效果的CSS代码，其原理是当用户鼠标悬停在链接上时，通过“:hover”伪类选择器匹配，通过“:after”伪元素添加下划线，并设置它的宽度为0，高度为2像素，颜色为黑色。同时，将它的位置设置到链接的下方，然后设置一个过渡效果，使得在0.3秒的时间内，下划线的宽度从0变成100%，就能实现下划线触击时变长的效果。

在页面设计过程中，我们可以根据需求对CSS代码进行修改，调整下划线的颜色、宽度、高度和过渡时间等参数，以达到更好的视觉效果和用户体验。