[分享]css3文字天界下划线

CSS3文字天界下划线是一种在文字下方添加装饰线条的效果，在网页设计中常常被用来强调重要文字或者用于标题设计等场合。使用CSS3文字下划线，可以使网页整体设计更加美观与紧凑。 .underline{...

CSS3文字天界下划线是一种在文字下方添加装饰线条的效果，在网页设计中常常被用来强调重要文字或者用于标题设计等场合。使用CSS3文字下划线，可以使网页整体设计更加美观与紧凑。

.underline{ 
	text-decoration: none; 
	position: relative;
}
.underline::before {
	content: "";
	position: absolute;
	bottom: -3px;
	left: 0;
	right: 0;
	width: 100%;
	height: 1px;
	background-color: #000000;
	transform: scaleX(0);
	transform-origin: bottom left;
	transition: transform 0.3s ease;
}
.underline:hover::before {
	transform: scaleX(1);
	transform-origin: bottom right;
} 

上述CSS代码实现了一个简单的下划线效果，通过:before伪元素生成一条绝对定位的横线，并通过transform属性实现了从左到右的动态展示效果。此外，针对a标签等带有默认下划线效果的元素，需要通过text-decoration:none属性去除默认下划线。

使用CSS3文字天界下划线可以使网页整体设计更加凝练和美观，同时也提高了网页的可读性和视觉效果。在使用过程中，还可以根据需要进行二次开发，例如调整下划线长度、宽度、颜色等属性，实现更丰富的设计效果。