CSS下劃虛線是我們經常用到的一個樣式,但是有時候我們會發現下劃虛線的長度不夠,無法達到我們預期的效果。這時候我們可以使用一些小技巧來讓下劃虛線變得等長。
.text { text-decoration: underline; text-underline-position: under; text-decoration-skip-ink: none; } .text--double:before, .text--double:after { content: ''; display: inline-block; width: 40%; height: 1px; margin: 0 5px 0 0; background-repeat: repeat-x; background-position: center; background-image: linear-gradient(to right, currentcolor 0%, currentcolor 50%, transparent 0%); } .text--double:after { margin: 0 0 0 5px; }
上面的代碼是使用CSS實現等長下劃虛線的方法,主要通過偽元素的方式來解決。其中,text-decoration
屬性用于設置下劃線樣式,text-underline-position
屬性用于控制下劃線的位置,text-decoration-skip-ink
屬性用于控制下劃線與文字的間距。
而等長下劃虛線則通過添加偽元素以及設置背景漸變來實現,content: ''
用于添加偽元素內容,inline-block
是行內塊級元素的顯示方式,width: 40%
和height: 1px
用于設置下劃線的長度和寬度,background-repeat: repeat-x
設置背景重復方式為水平方向,background-position: center
設置背景位置為居中,最后background-image: linear-gradient(...)
設置了漸變的背景圖片。
如果想要實現雙下劃線的等長效果,則可以通過添加before
和after
偽元素,并將寬度設置為40%
來實現。
以上就是CSS下劃虛線變等長度的方法,希望能對大家有所幫助。