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

Question

I'm having an issue when using a pseudo-element (::before) as an anchor-link, because the page doesn't recognize it as the anchor, and keeps going to the section itself. I've tried every option suggested in Nicolas Gallagher's blog, but nothing seems to work. The only difference I see in the blog's code is that I'm using flexbox for it to be a column and wrap the content.

This is the CSS I'm using

  #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;
}

Thanks!

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

EDIT: Done! Already found an easier method: Having an "empty" (non-breaking space) anchor within the same section, invisible to the reader, and not colliding with the upper area margins.

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;
}

And here's the code in action: https://codepen.io/JS3DX/pen/bGEjZbK?editors=1100. Credits to Calvin Spealman's blog for the answer to this issue.

Answer 1

Solved! Placing a scroll-margin-top: [px|em|rm] inside the styling of the target solves this waaaaaay easier. It's just a margin/brake to the auto-scroll from the anchor to the anchor-link, so you just need to establish well enough how far away that scroll margin will be, or the size of the nav menu if it has position: fixed styling:

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