CSS一條線連接兩圖標(biāo)

i {
display: inline-block;
position: relative;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: #ccc;
border-radius: 50%;
}
i:before {
content: '';
position: absolute;
top: 50%;
left: -25px;
width: 50px;
height: 2px;
background-color: #000;
transform: translate(0, -50%);
}
i:after {
content: '';
position: absolute;
top: 50%;
right: -25px;
width: 50px;
height: 2px;
background-color: #000;
transform: translate(0, -50%);
}
i:first-child:before {
content: none;
}
i:last-child:after {
content: none;
}

上面的代碼實(shí)現(xiàn)了一條線連接兩個(gè)圓形圖標(biāo)的效果。其中，通過:before和:after偽類實(shí)現(xiàn)線條的繪制，并通過transform屬性調(diào)整位置。通過:first-child和:last-child偽類控制第一個(gè)圖標(biāo)的線條前綴以及最后一個(gè)圖標(biāo)的線條后綴。這樣就實(shí)現(xiàn)了兩個(gè)圖標(biāo)間的連接效果。