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有.main作为CSS中的类，但HTML中没有

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

使用边框底部在菜单项的底部放置悬停/活动链接

1 个答案: