使用伪元素 (::before) 作为跳转 link 目标在 CSS 中不起作用

Question

我在使用伪元素 (::before) 作为锚点时遇到问题-link，因为页面不将其识别为锚点，并继续转到该部分本身。我已经尝试了 Nicolas Gallagher's 博客中建议的每个选项，但似乎没有任何效果。我在博客代码中看到的唯一区别是我使用 flexbox 将其作为一列并包装内容。

这是我正在使用的CSS

  #one, #two, #three {
  width: 5em;
  height: 5em;
  margin: 15em;
  display: flex;
  flex-flow: column wrap;
  background: blue;
}
#one::before, #two::before, #three::before {
    background: red;
    display: block;
    content: "";
    height: 150px;
    margin: -150px 0 0;
}

谢谢！

................................................

编辑：完成！已经找到了一个更简单的方法：在同一部分中有一个“空”（非中断 space）锚点，reader 不可见，并且不与上部区域边缘碰撞。

HTML:

<div id="red-container">
    <a name="red-target">&nbsp;</a>
    Hello World!
  </div>

CSS:

#red-container {
  width: 5em;
  height: 5em;
  position: relative;
  margin: 1.5em;
  /** display and flex-flow are not neccesary, its just for visual context**/
  display: flex;
  flex-flow: column wrap;
  background: red;
}
#red-container a {
  position: absolute;
  left: 0px;
  top: -6.6em;
  border: solid 1px red;
}

下面是实际代码：https://codepen.io/JS3DX/pen/bGEjZbK?editors=1100. Credits to Calvin Spealman's 博客，用于解决此问题。

Answer 1

已解决！在目标的样式中放置一个 scroll-margin-top: [px|em|rm] 可以更轻松地解决这个问题。它只是一个 margin/brake 到从锚点到锚点的自动滚动 - link，所以你只需要足够好地确定滚动边距有多远，或者导航菜单的大小如果它有 position: fixed 样式：

#one, #two, #three {
  scroll-margin-top: 1em;
}

使用伪元素 (::before) 作为跳转 link 目标在 CSS 中不起作用

Using a pseudo-element (::before) as jump link target not working in CSS

css

flexbox

anchor

pseudo-element