html - 响应式网站中的 CSS 自定义链接下划线表现不尽如人意

Question

我正在使用 Bootstrap 3 框架制作响应式网站。 我使用图像作为我的链接的自定义下划线(处于悬停状态)。 图像是 3 个彼此相邻的小点/圆圈。 我希望自定义图像在链接下方居中。全 Angular 看时效果很好 桌面屏幕。 (我已经使图像与链接的宽度相同，即 2 列宽)。当我缩小屏幕时，下划线图像会脱离与链接的居中对齐。感谢您的任何建议，我刚来这里所以不能发布照片...

这是我的 HTML:

  <div class="row" id="navbar">
    <div class="col-md-1"></div>
    <div class="col-md-2"><a href="#about">about</a></div>
    <div class="col-md-2"><a href="#services">services</a></div>
    <div class="col-md-2"><a href="#team">team</a></div>
    <div class="col-md-2"><a href="#contact">contact</a></div>
    <div class="col-md-2"><a href="#clients">clients</a></div>
    <div class="col-md-1"></div>
  </div>

这是我的 CSS:

#navbar {
text-align: center;
color: #02161b;
text-decoration: none;
font-size: 30px;
font-family: 'Comfortaa', cursive;}

#navbar a {color: #02161b;}

a:hover:after {
content: url(../img/navunderline165.png);
display: block;
position: absolute;
top: 16px;}

Answer 1

不确定你想要什么，但我猜是这样的:

CSS

#navbar a {
    color: #02161b;
    position: relative;
}
a:hover:after {
    content: url(http://familytrees.genopro.com/hoevenaren/images/trees32.gif);
    position: absolute;
    bottom: -30px;
    left: 0;
    right: 0;
}

Fiddle