Currently, I am facing an issue with my code, which you can view here: https://jsfiddle.net/phpd41tb/13/
The problem involves a link created using an anchor tag, and an extension of this link using the CSS :after:
Here is the HTML structure:
<a href="some-url">Notifications</a>
And the corresponding CSS:
&:after {
content : ">"; }
(Note that the code above is just for reference)
If you check the link provided, you will notice a gap between "Notifications" and ">". This space is not part of the actual clickable link.
My goal is to make the entire phrase "Notifications >" clickable, regardless of the space between the anchor tag and its :after pseudo-element.
I have tried various solutions suggested in different resources, such as:
- https://css-tricks.com/fighting-the-space-between-inline-block-elements/
- Why is there an unexplainable gap between these inline-block div elements?
Despite exploring these options, none of them seem to address my specific issue. Even attempts to modify the HTML structure by enclosing everything in another div have been unsuccessful.
Do you have any suggestions or ideas on how to resolve this? :)