响应式网站中的CSS自定义链接下划线不符合我的要求

Question

我正在使用Bootstrap 3框架制作响应式网站。 我正在使用图像作为我的链接的自定义下划线（处于悬停状态）。 图像是彼此相邻的3个小点/圆圈。 我希望自定义图像在链接下居中。在全宽度上查看时工作正常 桌面屏幕。 （我使图像的宽度与链接相同，即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

Answer 2

删除属性：

position: absolute;

这

a:hover:after

<强> Fiddle

O / P