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