CODEWITHSUNDEEP
css
Kablam
Kablam

Reputation: 2591

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

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?

Upvotes: 0

Views: 2591

Answers (2)

Bhuwan
Bhuwan

Reputation: 16855

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>
  <a href="#">link text one</a>
  <a href="#">link text two</a>
  <a href="#">link text three</a>
</div>

<div class="wrap">
  <p>These do have pointer-events: none; yet their behaviour is the same as with the block above.</p>
  <br>
  <a href="#" class="pointerevents">link text one</a>
  <a href="#" class="pointerevents">link text two</a>
  <a href="#" class="pointerevents">link text three</a>
</div>

Upvotes: 0

Zuber
Zuber

Reputation: 3473

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

Upvotes: 4

Related Questions