CSS的两条连接线是一种常见的设计技巧,可以在列表中的每两个相邻的之间增加一条分隔线,增加页面的美观度和可读性。下面介绍CSS实现两条连接线的方法: /* 方法1:使用 border */ li {
CSS的两条
/* 方法1:使用 border */ li { border-bottom: 1px solid #ccc; /* 在所有<li>下增加1像素的灰色边框 */ } li:last-child { border-bottom: none; /* 去掉最后一个<li>下的边框 */ }
使用border属性可以在每个
/* 方法2:使用 ::after 伪元素 */ li::after { content: ""; display: block; height: 1px; background-color: #ccc; margin: 10px 0; /* 分隔线的上下间距 */ } li:last-child::after { display: none; /* 去掉最后一个<li>下的分隔线 */ }
使用::after伪元素可以在每个
粉丝
0
关注
0
收藏
0