您可以使用CSS中的伪元素::after来为所有菜单项添加边框图像,并使用:last-child伪类来移除最后一个菜单项的边框图像。以下是一个示例代码:
HTML:
CSS:
.menu li {
position: relative;
}
.menu li::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 2px;
background-image: url("border-image.png"); /* 替换为您的边框图像路径 */
}
.menu li:last-child::after {
display: none;
}
在上面的示例中,我们为每个菜单项添加了一个伪元素::after,并设置了它的位置、宽度、高度和背景图像。最后一个菜单项使用:last-child伪类选择器来移除其伪元素::after的显示。您需要将"border-image.png"替换为您自己的边框图像的路径。
请注意,这只是一个示例,您可以根据自己的需求进行调整和修改。