0

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.

  • 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 Sep 25 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 Sep 25 at 19:33
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;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.