css實現下劃線的最佳實踐及其他方式

2021-10-09 02:10:41 字數 1064 閱讀 7243

開發中下劃線效果挺常見的,使用頻繁,特別用於對一些文章的內容做一些層次區分,重點分明,使用者體驗也好,談談下劃線的多種實現,以及最佳實踐

侷限:沒法調整下劃線的位置,太貼文字了也不好看

靈活性太差,用法太單一

.mark

侷限:缺點也是致命的,由於下劃線是整個元素的,一旦文字換行,就涼了

侷限:也是那種換行就涼了系列

不要求換行的情況下,是可以實現一些互動的hover效果的

換成inset下劃線還能和內容重合,酷

侷限:要想實現動畫的效果,就捉襟見肘了完整**如下:

lang

="zh"

>

>

charset

="utf-8"

/>

使用css實現動態下劃線效果

而且下劃線是與超連結同色的 大家可以自行測試 這個效果我們可以很方便的使用css偽元素來實現。主要是用到了transform 中的scale來縮放偽元素,達到拉長偽元素 下劃線 的結果。同時使用transform origin來控制縮放方向,下面的原始碼複製即可使用 dom href class s...

CSS實現酷炫動態下劃線效果

先上效果 兔幾?你好鴨div words words before div hover before 主要說一下css部分 這個就是我們顯示在div裡的一句話,設定div的寬高,絕對定位,文字居中,left 50 top 50 transform translate 50 50 是讓整個div處於頁...

CSS 分享幾條漂亮的下劃線樣式

早上看到一篇部落格,內容沒什麼,但其中有幾條漂亮的下劃線感覺非常不錯,雖然非常簡單,但對於經常寫博的人很有用,這裡分享一下,喜歡的就直接拿去用吧。使用方法 1.後台管理 設定 頁首html 裡面加上下面這句 2.在正文中使用類似如下的寫法,將需要用下劃線標註的文字包在特定的cass underlin...