在Web开发过程中,经常会遇到需要在页面上使用多个图标并将它们连接起来的场景,这时就可以使用CSS来实现。本文将介绍一种使用CSS一条线连接两个图标的方法。首先,我们需要用HTML代码添加两个图标,例
html <p> <i class="fa fa-user"></i> <i class="fa fa-chevron-right"></i> </p>
css p { position: relative; } p:before { content: ""; position: absolute; top: 50%; margin-top: -1px; /* 这里的值是线条的高度的一半 */ left: 20px; /* 连接线离左侧图标的距离 */ right: 20px; /* 连接线离右侧图标的距离 */ border-top: 1px solid #ccc; }
html <p> <i class="fa fa-user"></i> <i class="fa fa-chevron-right"></i> </p> <style> p { position: relative; } p:before { content: ""; position: absolute; top: 50%; margin-top: -1px; left: 20px; right: 20px; border-top: 1px solid #ccc; } </style>
粉丝
0
关注
0
收藏
0