CSS中可以使用多種方式設(shè)置線條樣式，包括顏色、寬度等屬性。但是有時候我們需要將線條的顏色隱藏起來，讓它看上去像是被白色覆蓋了一樣。例如，如果你想創(chuàng)建一個類似于輸入框的元素，并且希望在用戶輸入的時候顯示一個藍(lán)色的底線，但是在用戶沒有輸入時，隱藏這個底線的顏色，該怎么辦呢？下面我們將介紹一種簡單的實現(xiàn)方式。

.box{
position:relative;
background:#fff;
}
.box:after{
content:'';
position:absolute;
bottom:0;
left:0;
width:100%;
height:1px;
background:#fff;
z-index:1;
}
.box:before{
content:'';
position:absolute;
bottom:0;
left:0;
width:100%;
height:1px;
background:blue;
z-index:2;
transition: all .3s ease-in-out; 
}
.box:focus:before{
height:2px;
background:blue;
transition: all .3s ease-in-out; 
}

以上代碼是一個簡單的輸入框，當(dāng)輸入框沒有被聚焦時，底線用白色進(jìn)行隱藏。當(dāng)該輸入框被聚焦時，底線高度變?yōu)?像素，背景色變?yōu)樗{(lán)色，此時用戶的輸入內(nèi)容也能正確顯示。這個方法很簡單，主要是利用了CSS的偽元素:before和:after，將底線分隔成兩部分，在用戶聚焦之后修改前半部分的高度和背景色即可。