css - 使用 Border-bottom 将悬停/事件链接放置在菜单项的底部

Question

如何为事件链接或悬停链接添加下划线，下划线显示在菜单栏的底部？使用我目前拥有的代码(见下文)，下划线直接显示在菜单栏下方，而不是显示在菜单栏底部。我尝试使用负填充/边距，但这没有用。现在我有这个:

.horiz-tab, .horiz-tab-active {
    background: @actionBar;
    float: left;
    font-size: 1.2rem;
    padding: 1.5rem 1.125rem;
    position: relative;
}

a.horiz-tab:link, a.horiz-tab:visited {
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
}

a.horiz-tab:hover {
    color: #fff;
    text-decoration: none;
    border-bottom: #4c7296 6px solid;
    overflow: none;
    bottom: 0px;
}

.tab-count {
    background-color: #689dcd;
    border-radius: 15px;
    color: #fff;
    font-size: .9rem;
    margin-left: 0.35rem;
    padding: 2px 6px;
}

HTML 看起来像这样:

<div *ngFor="let record of records; let i = index;">
    <a routerLink="/organization" routerLinkActive="horiz-tab-active" class="horiz-tab">{{record._id.sub}}<span class="tab-count">{{record.count}}</span></a>
</div>

Answer 1

OP 在 CSS 中将 .main 作为一个类，但在 HTML 中却没有

.horiz-menu {
  color: #fff;
  background: #000;
  height: 34px;
  padding:6px 0 0 3px;
}
a.horiz-menu-tab:hover {
  color: #fff;
  background: #000;
  display: block;
  text-decoration: none;
  border-bottom: 6px solid #fb4;
  height:28px;
  margin:0;
}

  <div class="horiz-menu" *ngFor="let record of records">
    <a routerLink="/" routerLinkActive="horiz-menu-active" class="horiz-menu-tab">{{info}}</a>
  </div>