我看到了其他答案，但似乎没有一个对我有用。
我想要的是：当我输入.../page.html#two要转到的URL时#two，但距页面顶部的距离为50px。
注意：香港专业教育学院添加了big space和，<a>'s因为您无法在jsfiddle中键入url。我希望它与URL以及链接一起使用。
<body>
<section id="one">First section</section>
<section id="two">Second section</section>
<section id="three">Third section</section>
<div id="big_space"></div>
<a href="#one">one</a>
<a href="#two">two</a>
<a href="#three">three</a>
</body>
body
{
height: 2000px;
}
#big_space
{
height: 1000px;
}
section
{
height: 100px;
background-color: lightblue;
margin-bottom: 5px;
}
这是JSfiddle的链接：http : //jsfiddle.net/hAmCL/
我尝试使用，section:before但似乎给出了错误的结果（我在jsfiddle中将其注释掉了）
尽管有一些半解决方案，但这是不可能用纯CSS做到的
这种方法仅在某些情况下有效，但诀窍是使用margin-top:-50px; padding-top:50px;。这使元素出现在相同位置，但背景会50px更高并向上推50px。这是该方法的演示
我建议更多的第二种方法是涉及添加内部元素的方法。我决定格式化每个人<section id="one"><div class="reference" id="refOne"></div>First section</section>。然后，您可以指向链接中的引用，即<a href="#oneRef">one</a>。然后，通过以下简单的CSS即可完成所有工作
section {
... Your other lines ...
position:relative;
}
.reference {
position:absolute;
top:-50px;
}
演示。这种方法使所有元素都保持了以前的性能和外观，但是需要一些额外的HTML标记
像您尝试的那样能够引用元素的伪元素会很好，但是我知道这样做可能在语法上是不正确的
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句