一、CSS-鼠标划过文字时,文字下方出现往两边延伸的下划线
方法1:
举例:
HTML:
CSS:
对应代码:
//css鼠标划过文字出现往两边延伸的下划线
.header_l li a,
.header_r li:not(:last-child) a {position: relative;padding: 14px 0;
}
.header_l li a::before,
.header_r li:not(:last-child) a::before {content: '';position: absolute;width: 100%;height: 2px;bottom: 0;left: 0;background-color: #191e69;visibility: hidden;transform: scaleX(0);transition: all .3s ease-in-out 0s;
}
.header_l li a:hover::before,
.header_r li:not(:last-child) a:hover::before {visibility: visible;transform: scaleX(1);
}
结果:
【详情可参考大佬的CSDN:https://blog.csdn.net/Bonjours/article/details/103663618
】
方法2:
举例:
对应代码:
.addHeader_con_text_r_first {position: relative;
}
.addHeader_con_text_r_first:before {content: '';position: absolute;right: 0;bottom: -0.05rem;width: 3.3rem;height: (1rem / @fontSize);background-color: #4d4d4d;transition: all .3s ease-in-out 0s;
}
.addHeader_con_text_r_first:hover:before { // 表示当鼠标经过的时候transform: scaleX(1);
}
.addHeader_con_text_r_first:not(:hover):before { // 表示当鼠标离开的时候transform: scaleX(0);
}
二、
css鼠标划过文字,文字下面的下划线向中间消失;
css鼠标离开文字,文字下面的下划线向两边延申出现
举例:
对应代码:
.footer_h p:nth-child(2) {position: relative;margin-bottom: 0.2rem;
}
.footer_h p:nth-child(2):before {content: '';position: absolute;left: 0;bottom: 0;width: 8.4rem;height: 0.015625rem;background-color: #fffefe;transition: all .3s ease-in-out 0s;
}
.footer_h p:nth-child(2):hover:before { // 当鼠标经过的时候transform: scaleX(0);
}
.footer_h p:nth-child(2):not(:hover):before { // 表示当鼠标离开的时候transform: scaleX(1);
}
结果:
默认状态:
鼠标经过后
状态:
鼠标离开后
状态:
补充知识:
CSS
中:
:hover
表示鼠标经过的时候;
:not(:hover)
表示鼠标离开的时候。