Space with a:after

HTML

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

SCSS

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