Stopping cursor hover on pseudo-element - setting pointer-events to none is not effective for this

Question

Stopping cursor hover on pseudo-element - setting pointer-events to none is not effective for this

I have a dilemma with displaying multiple links side by side and would like to separate them with dividing dashes. My solution involved utilizing the ::before pseudo element, which achieved the desired effect seamlessly.

However, a new issue arose - hovering over the dividers also triggers a hover effect on the element containing the ::before pseudo element.

You can see an example of this problem in this fiddle. When you hover over the dashes, the underline appears under the link.

In my quest to find a solution, I stumbled upon a relevant discussion on Stack Overflow. By referencing additional resources such as the Mozilla Developer Network documentation and the Can I Use page on pointer-events property, I was optimistic that this issue would be resolved. Unfortunately, it wasn't.

What am I overlooking here?

css

Answer 1

Answer №1

To achieve the desired result, modifications in the CSS file are required

.container a::before {
    content: '----';
    padding: 0 15px;
    position: absolute;
    left: -50px;
    pointer-events: none;
}
.container a {
   text-decoration: none;
   position: relative;
   margin-left: 50px;
   display: inline-block;
}

Answer 2

To achieve the desired result, modifications in the CSS file are required

.container a::before {
    content: '----';
    padding: 0 15px;
    position: absolute;
    left: -50px;
    pointer-events: none;
}
.container a {
   text-decoration: none;
   position: relative;
   margin-left: 50px;
   display: inline-block;
}

Answer 3

Answer №2

To achieve the desired layout, apply position:absolute to the specific element within the <a> tag in order to remove it from the normal flow of the page. Additionally, use position:relative on the parent <a> element.

Code Snippet Example:

.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>

Answer 4

To achieve the desired layout, apply position:absolute to the specific element within the <a> tag in order to remove it from the normal flow of the page. Additionally, use position:relative on the parent <a> element.

Code Snippet Example:

.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>

Stopping cursor hover on pseudo-element - setting pointer-events to none is not effective for this

Answer №1

Answer №2

Similar questions

The scrollbar on the side of my page seems to be malfunctioning

Expandable Bootstrap 4 panel with collapsible preview and content overflow feature

Issues with the performance of the Responsive Image Slider

Wait for transition to finish before setting focus to text input

Adjustable div with varying positions and dimensions

In order to modify the navigation bar color, you must include the overflow property

Incorporate Error Text Spacing in Input Group Design

Selenium IDE - Verify the color in a test step

Optimal approach for reutilizing Javascript functions

Styling a Bootstrap dropdown menu so that an input field within it only accepts numeric digits

Is it necessary for HTML "buttons" to follow the same box-model as other elements?

The local server is having trouble loading JavaScript

Disable the click functionality while preserving the hover feature

Sub-menus at multiple levels are failing to automatically close child elements when clicked

After deployment, certain formatting elements appear to be skewed in the React application

Customizing the width of an <input> element in HTML/CSS

Displaying a few squares with Angular Material's mini buttons surrounding them

Using jQuery, is there a way to move an element from one div to another, but only if the destination div is currently empty

Adjust column content to fit width, instead of setting width to 100%

Dynamic Display Picture Banner - Adjustable Layout