巧用CSS3的after偽類添加橫線
時間：2019-09-19 訪問量：0
在網(wǎng)站建設開發(fā)的過程中，有時候我們需要給一些文字添加下橫線或者左右的橫線。這個時候我們可以使用不常見的偽類:after
例如：我們先寫一個A標簽
<a >Welcome to</a>
然后給A一個CSS樣式
a{position: relative;}
a:after{
content:"";
display: inline-block;
position: absolute;
top:30px;
left: 0px;
width: 80px;
height: 2px;
background-color: red;
}
</style>得到的效果如圖所示。
在網(wǎng)站建設中，我們有時候需要在文字中間劃一條橫線。根據(jù)以上的代碼，我們只需要將橫線的位置作調(diào)整。
top:10px;
就可以得到如下效果
是不是很簡單。
如果你平時也是一個前端開發(fā)人員，歡迎留言發(fā)現(xiàn)你的高見。我們是深圳佐岸視覺網(wǎng)站建設。
