在CSS中,下劃線是一種常用的修飾符號,可以通過text-decoration屬性來實現。然而,默認情況下,下劃線只會出現在文本的下方,并不會覆蓋整個容器。那么,如何實現整個容器的下劃線呢?
.container{ position: relative; border-bottom: 2px solid #000; } .container::after{ content: ""; position: absolute; bottom: 0; height: 2px; width: 100%; background-color: #000; }
以上代碼中,我們首先為容器添加了一個底部的2px黑色邊框。接著,通過偽元素::after在容器底部添加了一條與邊框顏色一致、寬度為100%的2px下劃線。要注意的是,我們需要將容器設為相對定位,偽元素設為絕對定位,并將bottom屬性設為0,即將偽元素貼在容器底部。
這樣,整個容器就被完美地下劃線了起來。需要注意的是,容器中的子元素依然會受到影響,因此需要根據需求適當調整其他元素的位置或者樣式。
上一篇css下劃線去不掉
下一篇mysql查看幾臺從庫