[分享]css中当前效果下划线

在CSS中，有很多样式可以使用，其中之一便是当前效果下划线。利用CSS的伪元素，我们可以为元素添加下划线，使得页面看起来更加美观。p { : relative; } / 默认状态下无下划线 / p:b...

在CSS中，有很多样式可以使用，其中之一便是当前效果下划线。利用CSS的伪元素，我们可以为元素添加下划线，使得页面看起来更加美观。

p {
    position: relative;
}

/* 默认状态下无下划线 */
p:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0;
    border-bottom: solid 1px #000;
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

/* 滑过状态下下划线出现 */
p:hover:before {
    opacity: 1;
} 

上述代码使用了伪元素before来实现下划线的效果，首先将p元素设置为相对定位，然后定义before元素的具体样式。在默认状态下，before元素的高度为0，是看不到下划线的。当鼠标滑过p元素时（可以使用:hover选择器），before元素的opacity属性值会从0变成1，此时下划线就会出现。

同时，可以根据自己的需要对下划线的颜色、粗细、位置等进行调整，如下：

p:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #000;
    transform: scaleX(0);
    transition: transform 0.2s ease-out;
}

p:hover:before {
    transform: scaleX(1);
} 

上述代码中，下划线的高度变成了2px，颜色改变为黑色，使用了transform将元素水平放缩到0，hover时再变回原始大小，从而实现下划线的出现和消失。

总之，当前效果下划线是在CSS中非常常见的一种样式，使用伪元素可以轻松实现。如果需要控制下划线的位置、颜色、粗细等，也可以根据自己的需要进行相应的调整。