[分享]css双下划线样式

 　　在CSS中，双下划线样式是一种非常常见的样式。通过双下划线样式，我们可以给文本添加下划线并在下划线的两侧添加一条细线，使文本更加清晰明了。.__underline { textdecoratio...

 　　在CSS中，双下划线样式是一种非常常见的样式。通过双下划线样式，我们可以给文本添加下划线并在下划线的两侧添加一条细线，使文本更加清晰明了。

.__underline {
  text-decoration: none;
  position: relative;
}
.__underline:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background: #000;
  bottom: 0;
  left: 0;
  transform: scaleX(0);
  transition: transform 0.15s ease-out;
}
.__underline:hover:after {
  transform: scaleX(1);
}
.__underline:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background: #000;
  top: 0;
  left: 0;
  transform: scaleX(0);
  transition: transform 0.15s ease-out;
}
.__underline:hover:before {
  transform: scaleX(1);
}

　　如上的代码所示，我们首先定义了一个class为.__underline的样式，用于添加双下划线样式。然后，我们给这个样式的:before和:after伪元素设置了细线的样式。

　　接着，我们使用transform: scaleX()来设置细线的缩放比例，以实现鼠标悬停时展开双下划线的效果。最后，使用transition属性来实现过渡效果，使双下划线展开时不会太过突兀。

　　通过以上的代码，我们就可以轻松地给文本添加双下划线样式了。值得注意的是，由于双下划线样式极易与链接下划线混淆，所以当文本作为链接时，需要将text-decoration属性设置为none。