css中before和last-child一起使用或者after和first-child一起使用

最新推荐文章于 2025-04-06 19:02:52 发布

原创最新推荐文章于 2025-04-06 19:02:52 发布 · 6.1k 阅读

6 ·

CC 4.0 BY-SA版权

前端技术专栏收录该内容

22 篇文章

订阅专栏

今天遇到一个需求！！！！往我下面看……(想啥呢？看图！！！)

没错！！就是你看到的这三个有点黑黑的点……（不要在意细节！)

我是用ul无序列表写的。在li里面设置before和after弄成中线的线条(无缝连接呀)；好吧回归正题。

我的想法是：第一个点的上面和最后一个点下面没有连接线。所以我刚开始想到的是：

disc-item::before:first-child{condent:" ";display:none;}

然而这是没啥用的-。。。！哈哈！！！！

好吧，知道你急了，死鬼别那么猴急嘛！！！嗯嗯……来正经的：loooooo……k

.disc-item:first-child::before{content:"";display:none;}

你大爷！似乎没啥改变嘛，只是我们添加伪类的时候顺序改变了。！可能你的效果还是无法正常：

让你看一下人家的啦……！！！

.notice_item::after{
	display: block;content:" ";
	background-color: #9b9b9b;width:2px;
	position:absolute;left:13px;top:0;bottom:50%;	z-index:20;}


.notice_item::before{
	display: block;content:" ";
	background-color: #9b9b9b;width:2px;
	position:absolute;
	left:13px;top:50%;bottom:0;z-index:20;}


.notice_item:last-child::before{display: none;content: "";}

.notice_item:first-child::after{display: none;content: "";}