Custom underline in square space when the text contains a link

Hey guys, 

I am working on a blog and I wanted to have a custom underline when the text contains a link. I couldn't figure it out, so I would just make the words bold and use this CSS code for a custom underline when the text is bold. 

p strong {background: linear-gradient (to bottom, #fff 60%, #ffd600 20%);
  padding-left: 2px;
  padding-right: 2px;
  border: 1px;
}

However, I am getting this weird white line that I don't want. I want the upper part to be transparent, I just want the underline. What should I do? Is there any other way I can have a custom underline that looks like a highlighter.

Can you share link to page in screenshot? We can test code easier