html - Bootstrap4 导航事件链接放置下拉箭头问题

Question

我将我的 Angular 元素用于 bootstrap 4，我试图在显示下拉箭头后添加导航类事件文本，但它无法正常工作，我该如何正确地做到这一点，谢谢。

我试过这样做

a:after {
  content: url('https://image.flaticon.com/icons/svg/60/60995.svg');
  height: 0;
  width: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  position: absolute;
  bottom: -1px;
  left: 50%;
  margin: 0 0 0 -3px;
  z-index: 100;
}

.nav-underline .nav-link:hover {
  color: #25AAE1;
}

.nav-underline .active {
  font-weight: 500;
  color: #25AAE1;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="nav-scroller  py-1 mb-2">
  <nav class="nav  d-flex justify-content-between">
    <a class="p-2 " (click)="toggletest()">Status <span class="lx-status-run  " style="    position: relative;
    margin-top: 0.5rem;
    float: right;
    margin-left: 0.5rem;"></span></a>
    <a class="p-2 active ">Home</a>
    <a class="p-2 ">About</a>
    <a class="p-2 ">Contact</a>

  </nav>
</div>

Answer 1

A relatively positioned element is an element whose computed position value is relative. The top and bottom properties specify the vertical offset from its normal position; the left and right properties specify the horizontal offset.

https://developer.mozilla.org/en-US/docs/Web/CSS/position

a 需要相对定位。

a {
  position: relative;
}

a:after {
  content: '';
  height: 0;
  width: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #000;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 0);
  z-index: 100;
}

.nav-underline .nav-link:hover {
  color: #25AAE1;
}

.nav-underline .active {
  font-weight: 500;
  color: #25AAE1;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="nav-scroller  py-1 mb-2">
  <nav class="nav  d-flex justify-content-between">
    <a class="p-2 " (click)="toggletest()">Status <span class="lx-status-run  " style="    position: relative;
    margin-top: 0.5rem;
    float: right;
    margin-left: 0.5rem;"></span></a>
    <a class="p-2 active ">Home</a>
    <a class="p-2 ">About</a>
    <a class="p-2 ">Contact</a>

  </nav>
</div>