这篇博客探讨如何利用CSS的`:after`伪元素为导航菜单创建选中状态的指示器，无需修改HTML结构。通过设置边框和透明度，可以巧妙地创建出三角形指示箭头。此外，还建议将填充移动到父元素，并为示例添加了`display: block`到链接样式。
使用一些魔术：after伪对象,你甚至不需要改变html标记=)
你可以尝试这样的事情：
nav ul li.selected:after{
content:'';
float:right;
width: 0;
height: 0;
border-top: 16px solid transparent;
border-bottom: 16px solid transparent;
border-right: 20px solid #ef5a29;
}
或者正如我在下面的jsfiddle中所做的那样：
nav ul li.selected a:after{
content:'';
position:absolute;
top:20px;
right:0;
width: 0;
height: 0;
border-top: 16px solid transparent;
border-bottom: 16px solid transparent;
border-right: 20px solid #ef5a29;
}
另请注意,我从li移动了填充,并为此示例添加了display：block to a.
1048
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
