Links are ineffective and cannot be clicked after employing a pseudo element

Encountered an issue with a hover animation for a border, where all links (a href's) within the DIV become unclickable after the animation ends. Is there a way to exclude them or ensure they remain clickable at all times?

Check out this Codepen

Any feedback is greatly appreciated, thank you in advance.

Here is the structure setup:

<div class="container">
<div class="row">
<div class="col-lg-4 image-cover">
<div class="first">
<div class="read-more">
<a href="">read more>>></a></div>
<div class="date">
<p>date</p></div>
</div>
</div>
</div>
</div>

The style code is lengthy so I couldn't include it here, please refer to the Codepen for that.

htmlcssbootstrap-4

Answer №1

Your links are being covered by your pseudo-elements, causing you to click on the pseudo instead of the actual links below.

To solve this issue, you can add either pointer-events:none; or z-index:-1 to your pseudo-elements

.first {
  &::before,
  &::after {
    pointer-events:none;
    /* OR */
    z-index:-1;
  }
}

Answer №2

The issue at hand is that the pseudo elements are overlapping the original element, causing the links to act as if they are part of the ::before and ::after elements. To resolve this, you can include the following line in your pseudo selectors:

&:hover::before,
&:hover::after {
  pointer-events: none;
}

By adding this line, the mouse will no longer interact with those elements, allowing clicks on the links beneath them.

To learn more about pointer-events, visit: MDN

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

PHP/HTML Contact Form that sends messages to a designated email address depending on the option selected in

UPDATED: I recently created a contact form using HTML/PHP. I want to enhance user experience by allowing them to choose a specific department from a dropdown menu and have their email routed directly to that department's designated email address. My ...

phpjqueryhtmlemailcontact-form

The functionality of Bootstrap 5 flex-grow-0 is not behaving as expected

Below is the code snippet for my customized navbar: <nav class="navbar navbar-expand-md fixed-top bg-white"> <div class="container my-2"> <a href="/" class="navbar-brand text-dark fw-bold"> Rakshit Deshmukh </a> ...

bootstrap-4bootstrap-5

Update CSS using onChange event with an array of values

I'm currently working on an app that allows users to select a color scheme from a dropdown form. The hexidecimal values associated with the selected color scheme successfully populate specific text fields as intended. However, I am facing difficulty i ...

jquerycssarraysappend

Having trouble with loading a 3D gltf model on A-frame.io?

I'm experiencing some difficulties when attempting to load a gltf model onto an a-frame. Unfortunately, the model does not appear to be loading properly. Here is the code snippet in question: <html> <head> <title>Tree model</t ...

html3daframegltf3d-model

The right-to-left attribute in the index.html file is not functioning properly within an Angular 10 Project

I recently set up an Angular 10 project and added the Bootstrap4 rtl package, but I noticed that all my components are still rendering as ltr. Strangely, when I uninstalled Bootstrap, everything worked correctly. Does anyone happen to know how to properl ...

angularbootstrap-4

Ways to serve HTML without relying on code generated by JQuery

I am currently utilizing the html() function in JQuery to extract the HTML content of a specific div on my web page. Nevertheless, the output includes all the code generated by JQuery as well: <ul><li id="fact_1" class="jstree-open"><ins cl ...

javascriptjqueryhtmlajax

Use jQuery to dynamically update HTML content based on changes in a form field

Is there a way to update the value of an input field in real-time and display it in a DIV? Currently, I have this code: $("#page_name").change(function () { var new_val = $("#page_name").val(); $("#page_url").html(new_va ...

jqueryhtmlinputonchange

What is the best way to merge two values with the same property in an object using a comma as a separator

Is it possible to combine the values of properties with a separator in my scenario? Here is an example of my JSON structure: { "name": "aa", "name": "bb", "name1": "cc", "name2": "dd" } I am looking to display the values of the key 'name&apo ...

javascriptangularjshtml

"Troubleshooting problems with the display:none property in a media

Encountering a small dilemma with media queries within my HTML. One of the sections in my code contains the following: <div class="header-left"> </div> <div class="header-center"> <ul> <li class="end"> ...

htmlcssmedia

Merge two methods to create proportional buttons that function flawlessly on Mac Firefox

code I am facing an issue with the buttons in my code. While they work fine on Mac Firefox, they are not proportional. I made modifications to make them proportional as desired, but now they are not working on Mac Firefox. Since I have multiple pages wit ...

cssbootstrap-4

The svg image could not be loaded from an external URL due to a Content Security Policy directive violation stating: "default-src 'none'"

Currently, I am working on creating an SVG that includes an image from an external URL: https://i.stack.imgur.com/4iGwt.jpg: <svg version="1.1" baseProfile="full" width="300" height="86" viewBox="0 0 300 86" preserveAspectRatio="xMinYMin meet" xmlns= ...

htmlimagesvgcontent-security-policy

Guide to dynamically loading HTML and scripts as requested by the user

As I embark on creating my first single page application, I am faced with a challenge. The application contains an overwhelming amount of HTML code that I do not want to be loaded all at once on the client side. Instead, I would like to load the HTML conte ...

htmlasp.net

Creating a Vue.js v-for loop to dynamically display a series of DIVs in segments

Here is the code I am currently working with: <div class="container-fluid" id="networdapp" style="display:none;"> <div class="row" > <div v-for="(result,i) in results" :key="i" class="col-sm-6" > <div class=" ...

javascripthtmlcssvue.jsvuejs2

Setting a maximum height using flex property of 1 while also enabling overflow

Imagine a scenario where you have a <div with a height specified as a percentage of its parent's height, and this <div contains a contenteditable element as its child. The goal is to make the child fill all available vertical space and scroll wh ...

cssflexboxoverflow

What are the steps to executing commands with child processes in Node.js?

I have successfully established communication between the client and server using socket.io. I am now utilizing WebSockets to send commands from the client to the server, and I would like to execute these received commands on the server. Here is my approa ...

javascripthtmlnode.jsexpresswebsocket

analyzing information from an online source

I'm currently developing a program that displays the maximum daily temperature for a specific city by utilizing data retrieved from the National Weather Service website. I have all the necessary data, however, whenever I attempt to create the actual g ...

javahtmlloopsgraph

The latest version of npm Boostrap (4.1.0) is missing some important CSS properties for the `background` tag

I am currently working on an Angular 5.2.10 project that utilizes angular-cli and bootstrap version: 4.0.0-beta.2 with a specific css class called .en-icon-24: .en-icon-24 { background: url(../../../../assets/img/icons.png) -370px 0px; width: 24 ...

cssangularnpm

I'm looking to optimize my paragraph for small screens by incorporating a Google AdSense banner

I need help adjusting my content with a Google banner for small screens. Here is an example image: Example Image Within the parent div with the class name parent-content, there is a banner div named ad3. Below is the code I have written for screens with ...

htmlcssmedia-queries

Loading external JSON and images located beyond the root directory

Currently, I am attempting to load a JSON file and a set of images from a directory located above my root directory. Although the code I have works, I believe there may be a more efficient way to achieve this. $.getJSON("http://localhost/folder1/folder2/f ...

javascriptcssjson

Lengthen the space between each item on the list to enhance readability

Is there a way to adjust the line height between li tags? I attempted using height:100%, but it seems ineffective. Are my methods correct? Can anyone provide guidance? The following is the code snippet in question: <html xmlns="http://www.w3.org/1999 ...

htmlcss