網頁中經常使用一些特效來美化頁面，其中之一就是橫線加文字特效。這種特效可以用來突出重要的文字內容，使其更加醒目，增強視覺效果。下面我們來簡單了解一下如何使用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的使用，為網頁特效的實現提供更多的可能性。