在CSS樣式設計中,文字紅色波浪線是一種常見的效果,可以用于突出顯示文本中的錯誤或警告信息。下面介紹如何使用CSS代碼實現這種效果。
.text-red-wavy { color: red; text-decoration: none; position: relative; } .text-red-wavy::after { content: ""; display: block; border-bottom: 3px solid red; position: absolute; left: 0; bottom: -2px; width: 100%; transform: scaleX(0); transition: transform 0.3s ease; } .text-red-wavy:hover::after { transform: scaleX(1); }
首先,在CSS中定義一個類名為text-red-wavy的樣式,設置文字顏色為紅色、文本裝飾為none,同時設置一個相對定位。接著,在該類名樣式的::after偽元素中,設置border-bottom為3px實線紅色邊框,位置設為絕對定位,居左下方,寬度為100%。同時,通過transform:scaleX(0)和transition屬性,實現當鼠標懸停于紅色文字上時,波浪線從左向右漸變顯示出來的效果。
以上是實現文本紅色波浪線效果的CSS代碼,可以根據實際需要進行調整。利用這種樣式可以使需要提醒或警示的文字更加醒目突出,提高網頁的用戶體驗。
下一篇php 代碼優美