What is the difference between span element and class using pseudo-element?

Question

I want to make a animated button. If the mouse cursor is placed on the button, the elements in button should be moved to the each place where i set. That's what i want.

HTML Code

    <div class="ani_button">
        <a href="https://www.google.com">
            <span>Start</span>
        </a>
    </div>

CSS code used [.class::after] - Does not work.

  .ani_button {
    width: 200px;
    font-size: 1.3em;
    background: violet;
    text-align: center;
    margin: auto;
    position: relative;
  }

  .ani_button a {
    display: block;
    padding: 15px;
  }

  .ani_button::after {
    content: "▶";
    position: absolute;
    top: 13px;
    right: 30px;
    font-size: 1.2em;
    opacity: 0;
  }

  .ani_button:hover span {
    margin-right: 20px;
    transition: 0.5s;
  }

  .ani_button:hover .ani_button::after {
    opacity: 1;
    right: 60px;
    transition: 0.5s;

CSS code used [span::after] - It works.

  span::after {
    content: "▶";
    position: absolute;
    top: 13px;
    right: 30px;
    font-size: 1.2em;
    opacity: 0;
  }

  .ani_button:hover span {
    margin-right: 20px;
    transition: 0.5s;
  }

  .ani_button:hover span::after {
    opacity: 1;
    right: 60px;
    transition: 0.5s;

What is the difference between this two examples? I want to know why [.class:hover .class::after] did not work.