HTML/CSS: Getting rid of space between a and a:after tag

Question

The behaviour I currently have is this one: https://jsfiddle.net/phpd41tb/13/

I have a link made with an a tag, and an extension of this link with the css :after:

HTML

<a href="some-url">Notifications</a>

CSS

&:after {
        content : ">"; }

(the part of the code here is just so I can post)

If you can see the link, there's a blink between the "Notifications" and the ">", a space that isn't part of the link.

What I want, is the whole block "Notifications >" being clickable whatever the space between the a tag and its :after is.

I tried all solutions there, which are more or less the same ones, but since it's not an inline-block problem in my case, I couldn't make it work:

• https://css-tricks.com/fighting-the-space-between-inline-block-elements/
• Why is there an unexplainable gap between these inline-block div elements?

I didn't find anything else related to that, and all of my attempts to change the html (like putting all in another div, etc), didn't work either.

Any ideas? :)

Answer 1

change right : -15px; to right : -12px;

.menu-title h6 {
  font-size: 1.2em;
  display: block;
  transition: opacity 0.4s ease 0.4s; 
}
 .menu-title h6 a {
    color: #000000;
    position: relative;
    text-decoration: none; 
}
.menu-title h6 a:after {
      position: absolute;
      top: -1px;
      right: -12px;
      content: ">";
      transition: transform 0.4s ease, opacity 0.4s ease; 
}
.menu-title h6 a:hover:after {
      transform: translateX(10px);
      opacity: 0.6; 
}

<div class="menu-title">
  <h6>
    <a href="some-url">Notifications</a>
  </h6>
</div>

Answer 2

This works quite smoothly, I think. I've changed the translate animation by a padding animation, so hovering doesn't remove the link from under the pointer.

Extract:

...
  &:after {
    padding-left: 0.5rem;
    content : ">";
    transition :opacity 0.4s ease, padding 0.4s ease;
  }
  &:hover {
    &:after {
      padding-left: 2rem;
      opacity : 0.6;
    }
  }
...