时间戳

首页 > 解决方案 > 在导航栏中创建活动状态箭头

html - 在导航栏中创建活动状态箭头

问题描述

我的 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/ 。

我尝试使用来自引导程序的基本模板中的这段代码：

/* 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;
}

标签： htmlcss

解决方案

正如我从您的代码中看到的那样， .active 类不是锚标记的选择器，这意味着 .active 是锚标记的子级，而不是状态类，我希望我能很好地理解你

所以应该是这样的

/* 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;
}

阅读有关选择器的更多信息

推荐阅读