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

标签 html css twitter-bootstrap

我正在使用 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;}

最佳答案

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

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

关于html - 响应式网站中的 CSS 自定义链接下划线的行为不符合我的要求,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20909435/

相关文章:

javascript - Chrome 扩展程序 : Passing DOM Information to background page/script

twitter-bootstrap - 带有右侧固定侧边栏的 Bootstrap 响应式网格

php - JQuery .eq 选择器不选择元素

javascript - Html5页面滑动问题

javascript - 如何使用从两个不同的 SQL 表获取信息的 <td> 输入执行查询保存?

html - Bootstrap 4 导航栏选项卡未激活选项卡内容

javascript - 如何在 Bootstrap 中加载页面时隐藏侧边栏?

javascript - 如何在 Scroll 上使用 CSS 和 JS 创建插图

javascript - 如何使用CSS动画从中心增加边框线

javascript - 如何防止输入控件允许事件冒泡?