使用 :last-of-type 与 ::after 结合可为非最后一个列表项添加分隔线。通过 .menu li:not(:last-of-type)::after 设置样式，在每个项目后插入垂直线或字符“|”，避免末尾多余分隔，常用于导航菜单美化，保持结构清晰。
在CSS中，可以利用 :last-of-type 与 ::after 伪元素结合，为列表或其他结构中的非最后一个元素添加装饰性分隔线。这种方法常用于美化导航、菜单或内容区块，避免在最后一个项目后出现多余的线条。
:last-of-type 选择器用于选中其父元素下同类型标签中的最后一个元素。例如，在一组 p 标签中，它会匹配最后一个 p 元素。
这个选择器非常适合排除最后一个元素，从而控制样式显示逻辑。
::after 伪元素可以在目标元素的内容之后插入一个虚拟的装饰层，常用于添加图标、箭头或分隔线。
立即学习“前端免费学习笔记（深入）”；
通过结合使用 :not(:last-of-type) 和 ::after，可以为除最后一个元素外的所有元素添加分隔线。
假设有一组列表项，希望在每个项之间显示一条竖线或横线，但最后一个不显示：
HTML 结构：
<ul class="menu"> <li>首页</li> <li>关于</li> <li>服务</li> <li>联系</li> </ul>
CSS 样式：
.menu li {
display: inline-block;
padding: 0 12px;
position: relative;
}
.menu li:not(:last-of-type)::after {
content: "";
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 1px;
height: 12px;
background-color: #ccc;
}说明：
:not(:last-of-type) 确保只有非最后一个 li 才会触发 ::after::after 创建一条垂直分隔线，定位在每个项右侧中间位置若想用字符作为分隔符（比如竖线符号），可修改 content：
.menu li:not(:last-of-type)::after {
content: "|";
margin-left: 12px;
color: #999;
}这样会在每个项目后添加一个“|”符号，最后一个除外。
基本上就这些。使用 :last-of-type 配合 ::after 是一种简洁高效的方式，实现视觉上的分隔效果，同时保持语义清晰和结构干净。关键是掌握否定选择器与伪元素的配合逻辑。
以上就是如何在CSS中使用伪类:last-of-type与::after实现装饰性元素_结合:last-of-type ::after显示分隔线的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
430
收藏
取消收藏
