[分享]css划过出现下划线

CSS是一种用来美化HTML页面的技术。其中一种常见的应用就是让鼠标划过时，文本出现下划线。下面是一个具体的实现方法：a { textdecoration: none; : relative; } a...

CSS是一种用来美化HTML页面的技术。其中一种常见的应用就是让鼠标划过时，文本出现下划线。下面是一个具体的实现方法：

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

a:hover:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: #000;
} 

首先，这段代码给所有元素设置了text-decoration为none，这是为了消除默认的下划线效果。然后在hover状态下设置了:before伪元素，它是在文本之前添加的一个元素。它的position属性设置为absolute，这样可以把它的位置独立出来，并且不会占用文本的位置。width和bottom都设置为100%，这样可以让下划线宽度和文本一致，并且和文本底部对齐。background-color设置为黑色，这样就可以产生一个黑色下划线。

使用这段代码，当鼠标划过元素时，就会出现一个下划线。