我的 CSS 文件中有这段代码:
.blog-nav li {
position: relative;
display: inline-block;
font-weight: 500;
}
.blog-nav li a {
color: #fff;
position: relative;
display: inline-block;
padding: 10px;
font-weight: 500;
color: #cdddeb;
}
.blog-nav li a:hover,
.blog-nav li a:focus {
color: #fff;
text-decoration: none;
}
我想添加这样的箭头:https://getbootstrap.com/docs/3.4/examples/blog/ .
我尝试使用 bootstrap 的基本模板中的这段代码:
/* Active state gets a caret at the bottom */
.blog-nav li a .active {
color: #fff;
}
.blog-nav li a .active:after {
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
margin-left: -5px;
vertical-align: middle;
content: " ";
border-right: 5px solid transparent;
border-bottom: 5px solid;
border-left: 5px solid transparent;
}
最佳答案
正如我从您的代码中看到的那样,.active 类不是 anchor 标记的选择器,这意味着 .active 是 anchor 标记的子级,而不是状态类,我希望我理解您的意思
应该是这样的
/* Active state gets a caret at the bottom */
.blog-nav li a.active {
color: #fff;
}
.blog-nav li a.active:after {
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
margin-left: -5px;
vertical-align: middle;
content: " ";
border-right: 5px solid transparent;
border-bottom: 5px solid;
border-left: 5px solid transparent;
}
阅读更多关于 selectors 的信息
关于html - 在导航栏中创建事件状态箭头,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57017161/