CSS animated text using before and after

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: -

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

it would show up like this: -

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