网页中经常使用一些特效来美化页面，其中之一就是横线加文字特效。这种特效可以用来突出重要的文字内容，使其更加醒目，增强视觉效果。下面我们来简单了解一下如何使用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的使用，为网页特效的实现提供更多的可能性。