基础5 - 修改顶部链接以使边框底部具有SASS

Question

我正在使用Foundation 5网站，需要自定义.top-bar导航菜单。我正在使用SASS版本的Foundation。

我在使用SASS修改菜单链接的活动和悬停样式时遇到了困难。我已经更改了颜色，但是我想在链接中添加border-bottom来指示活动/悬停状态。

默认情况下，Foundation使用背景颜色来指示活动/悬停，并且我不确定我需要编辑的确切位置以添加border-bottom。正如我目前所拥有的那样，边界太低了，我需要它在文本下面。

目前看起来像这样：

需要使用border-bottom开启此内容：

_settings.scss中的当前样式：

$topbar-bg-color: $white;
$topbar-bg: $topbar-bg-color;

// Height and margin
$topbar-height: rem-calc(65);


// Set the link colors and styles for top-level nav
$topbar-link-color: $asc-darkgray;
$topbar-link-color-hover: $lesson-orange;
$topbar-link-color-active: $lesson-orange;
$topbar-link-color-active-hover: $white;
$topbar-link-bg: $white;
$topbar-link-bg-color-hover: $white;
$topbar-link-bg-hover: $white;
$topbar-link-bg-active: $white;
$topbar-link-text-transform: uppercase;


// Divider Styles
$topbar-divider-border-bottom: solid 1px  scale-color($asc-lightgray, $lightness: 13%);
$topbar-divider-border-top: solid 1px scale-color($asc-lightgray, $lightness: -50%);

Answer 1

默认情况下，顶栏中的<a>标记设置为line-height等于顶栏的高度，以确保它们与中间对齐。

如果您想在菜单链接上使用边框底部并且仍然将其垂直对齐到顶栏的中间，您只需要跨越链接文本：

<li>
  <a href="#">
    <span class="link-border-bottom">border bottom link</span>
  </a>
</li>

并为您的<span>课程提供border-bottom（如果您愿意，可以:hover）：

.link-border-bottom {
   &:hover {
     border-bottom: 1px solid orange; 
   }
}

或者如果您希望主动链接加下划线：

.active { 
  .link-border-bottom {
    border-bottom: 1px solid orange; 
  }
}

这里有Plunker使用vanilla CSS。