向我的WordPress添加了一些代码,以使其向所有h2
标题添加锚链接。此外,当悬停时,它在每个标题的前面都显示一个小的链状徽标。
它是这样的:
这是我的HTML标记:
<h2 id="contact">
<a class="anchor" href="#contact">
<i class="fa fa-link" title="Permalink"></i>
</a>
Contact us
</h2>
这是CSS:
h2 a.anchor {
position: absolute;
top: 0;
left: 0;
margin-left: -25px;
padding: 0.75em 8px 0.75em 4px;
font-size: 18px;
font-size: 1rem;
line-height: 1;
color: #CCCCCC;
display: none;
}
h2:hover a.anchor {
display: block;
}
但是,我的页面确实具有固定的导航标题,因此锚链接需要一些偏移量。否则,我的文本内容将隐藏在固定标题下。
我添加了以下代码,以实现偏移量:
h2:before {
display: block;
content: " ";
height: 125px;
margin-top: -125px;
visibility: hidden;
}
不幸的是,锁链徽标现在向上移动,并显示在其原始位置上方125像素处。如何获得标题前面的链标志和125px的偏移量以应付固定的标题?
这应该为您工作。
(演示)
的HTML
<div class="anchor-wrapper" id="contact">
<h2>
<a class="anchor" href="#contact">
<i class="fa fa-link" title="Permalink"></i>
</a>
Contact us
</h2>
</div>
的CSS
h2 {
margin: 0px;
padding: 0px;
}
a.anchor {
font-size: 18px;
color: #CCCCCC;
opacity: 0;
margin-left: -1.2em;
width: 1em;
}
h2:hover a.anchor {
opacity: 1;
}
.anchor-wrapper:before {
display: block;
content:" ";
height: 125px;
margin-top: -125px;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句