css样式横线加文字

网页中经常使用一些特效来美化页面，其中之一就是横线加文字特效。这种特效可以用来突出重要的文字内容，使其更加醒目，增强视觉效果。下面我们来简单了解一下如何使用CSS样式来实现横线加文字特效。

.text-line {
    display: inline-block;
    position: relative;
    padding-bottom: 5px;
}
.text-line::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #000;
    transform-origin: center;
    transform: scaleY(0);
    transition: transform 0.3s ease-in-out;
}
.text-line:hover::after {
    transform: scaleY(1);
}
    

上面的代码中，我们将要添加横线的文本使用了一个类名为"text-line"的标签来包裹起来。然后我们对这个标签进行了一些基本的设置，比如将其设置为inline-block类型的元素、相对定位、设置底部内边距等等。

接下来的代码块使用了CSS伪元素::after来添加了一条横线。我们将其设置为绝对定位，并根据父元素的宽度设置了其宽度为100%。同时，我们还设置了其高度为1px，并使用了黑色作为背景色。为了达到优美的过渡效果，我们将其transform-origin设置为中心点，然后在:hover伪类中使用了transform的缩放功能来实现横向放大的效果。

这样，我们就成功实现了一个简单的横线加文字特效。通过学习这种使用CSS样式生成横线加文字的方法，我们可以更好地掌握CSS的使用，为网页特效的实现提供更多的可能性。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！