CSS animated text using before and after

HTML-CSS
1

I have a part of my personal website that holds links my projects the links are very basic and are just a tags which are wrapped around with the following: -

a.link::before {
    content: '<';
      left: 0;
}


a.link::after {
    content: '/>';
      right: 0;
}

Here is the html element: -

 <p>
        <a class="links" href="" target="_blank">Survey Form</a>
      </p>

it would show up like this: -

I want to target these elements and animate them, how would I do this?