Preventing hover on pseudo element - but pointer-events: none; doesn't do it - css

Question

I have a few links on one line next to each other, and I would like to have dividing dashes between them. I chose to make this happen with the use of the ::before pseudo element, and it works nicely.
However, hovering over the dividers also triggers the hover over the element I have the ::before on.
This is a fiddle showing the issue. If you hover over the dashes, the underline appears under the a.
In my search as to how to prevent this from happening, I ran into this stackoverflow question. Together with the documentation on developer.mozilla.org and the caniusethis page on the pointer-events property I was sure this would fix it. But it didn't.
What am I missing here?

Answer 1

You need to make changes in css
.wrap a::before {
content: '----';
padding: 0 15px;
position: absolute;
left: -50px;
pointer-events: none;
}
.wrap a {
text-decoration: none;
position: relative;
margin-left: 50px;
display: inline-block;
}

Answer 2

You will need to use position:absolute for the ---- to make it out of the <a> flow and also position:relative to the parent <a> element.
Stack Snippet
.wrap a {
text-decoration: none;
margin: 0 30px;
position: relative;
}
.wrap p {
margin: 0;
}
.wrap {
font-family: sans-serif;
border: 1px solid green;
padding: 5px;
margin-bottom: 20px;
}
.wrap a:nth-of-type(1) {
margin-left: 50px;
}
.wrap a::before {
content: '----';
position: absolute;
pointer-events: none;
left: -30px;
transform: translateX(-50%);
}
.wrap a:hover {
text-decoration: underline;
}
<div class="wrap">
<p>These links do not have the pointer-events: none; property</p>
<br>
link text one
link text two
link text three
</div>
<div class="wrap">
<p>These do have pointer-events: none; yet their behaviour is the same as with the block above.</p>
<br>
link text one
link text two
link text three
</div>