Insert wrap span tag around contents of a link tag automatically

Question

I've searched around a good bit last night and today and haven't been able to find just what I'm looking for here.

Basically I'm trying to automate this process:

When I click the link button inside the Wordpress visual editor I want to automatically wrap the contents with a span tag as well.

i.e. Instead of the output being...

<a href="#">This link</a>

...it would instead output:

<a href="#"><span>This link</span></a>

I have some link styles dependent on a span tag being wrapped around the link text and I don't want to manually edit every link whenever I add one.

Is this something that I can accomplish or do I have to use some JS or something to have it go through my post links and apply the change? The only links that need to be automated are links inside the articles.

Any insight is greatly appreciated.

EDIT: Here's the link style I'm trying to recreate: https://codepen.io/jacob_johnson/pen/ExYZgEV

Alternatively, if there's another way to do this style without the span tag then I'm all ears.

Answer 1

The effect you are looking for can be achieved by adding the box-shadow to the link element directly. The span is totally unnecessary:

Just change this:

a {
  color: #545454;
  text-decoration: none;
}

a span:hover {
  color: #000000;
  box-shadow: inset 0 -10px #ffbe76;
}

a span{
  box-shadow: inset 0 -10px #f6e58d;
}

To this:

a {
  color: #545454;
  text-decoration: none;
  box-shadow: inset 0 -10px #f6e58d;
}

a:hover {
  color: #000000;
  box-shadow: inset 0 -10px #ffbe76;
}