近年來，在網頁設計中常見的一種小技巧是讓文字出現橫杠，以吸引用戶的注意力。這種效果其實是借助CSS實現的，下面就來詳細介紹一下。

p {
display: inline-block;
position: relative;
padding-bottom: 8px;
}
p:after {
content: "";
width: 100%;
height: 2px;
background-color: black;
position: absolute;
bottom: 0;
left: 0;
transform: scaleX(0); /* 將橫杠寬度設為0，等待后續動畫 */
transform-origin: 0 50%; /* 指定橫杠縮放中心點為元素左端點的中心 */
transition: transform 0.3s ease-out; /* 添加橫杠動畫效果 */
}
p:hover:after {
transform: scaleX(1); /* 鼠標懸停時開始進行縮放動畫 */
}

首先，在p標簽的樣式中，將display屬性設為inline-block，以便后續內容能夠自動換行，并且設置了position屬性為relative，以便為后續樣式中的偽元素提供定位參考。

接下來使用偽元素after對p標簽進行修飾。設置content屬性為空字符串，規定該偽元素為內部內容。width屬性設為100%，height屬性設為2px，指定橫杠的尺寸。background-color屬性設為黑色，確定橫杠的顏色。position設為absolute，bottom設為0，left設為0，指定橫杠的位置，確保橫杠出現在p標簽的底部。

接著，設定橫杠的初始狀態。transform屬性中的scaleX()函數是沿著X軸進行縮放。因為橫杠的初始狀態應當是不可見的，所以將它的寬度縮放到0。

然后，設定橫杠的動畫。因為當鼠標移動到p標簽上方時，才進行橫杠的縮放動畫，所以將transition屬性設定在:hover后偽元素中，以保證只有在鼠標懸停時才執行動畫。

最后，在:hover后偽元素中，將transform屬性設定為scaleX(1)，表示將橫杠的尺寸恢復到100%，以實現橫杠的出現效果。

綜上所述，使用CSS實現文字出現橫杠的方法并不復雜，只需簡單的代碼便可實現該效果。如果你希望制作一個獨具特色的網頁，那么這種小技巧肯定會讓你的網站更加吸引人。