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:

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

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.

• links
• visual-editor

• If you could explain exactly the reason you need those span in the links for styling maybe someone could give you a solution that won't require the span in the first place. – freejack Commented Sep 25, 2019 at 19:27
• codepen.io/jacob_johnson/pen/ExYZgEV I'm trying to achieve this link style which I could only figure out by inserting a span tag in my link tag. If there's a better solution I'd love to know. – Jacob Johnson Commented Sep 25, 2019 at 19:33

1 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;
}