巧用CSS3的after偽類添加橫線
時(shí)間：2019-09-19 訪問量：0
在網(wǎng)站建設(shè)開發(fā)的過程中，有時(shí)候我們需要給一些文字添加下橫線或者左右的橫線。這個(gè)時(shí)候我們可以使用不常見的偽類:after
例如：我們先寫一個(gè)A標(biāo)簽
<a >Welcome to</a>
然后給A一個(gè)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)站建設(shè)中，我們有時(shí)候需要在文字中間劃一條橫線。根據(jù)以上的代碼，我們只需要將橫線的位置作調(diào)整。
top:10px;
就可以得到如下效果
是不是很簡(jiǎn)單。
如果你平時(shí)也是一個(gè)前端開發(fā)人員，歡迎留言發(fā)現(xiàn)你的高見。我們是深圳佐岸視覺網(wǎng)站建設(shè)。
