I want those two effects (hyperlink and line)

Hello furudo86,

Both things can be managed via CSS. You can add the CSS in your style.css to add the Underline under the hyperlink and add the square border around it.

For example

a.classname{
text-decoration : none;
cursor: pointer;
border-bottom: 2px solid #85baff;
}

Note: In the above example, “classname” needs to be replaced with your anchor tag class.

Something like this can add Blue Border under your hyperlink.

Thanks.

Hi Kartik,

Thank you for your help!
What is my ”anchor tag class”? How can I find it?

Hi @furudo86,

If you need more ideas, I keep a set of link styling samples up on CodePen.

We’d have to look at your page to give the exact CSS selector you need. Or, you can find out yourself by learning how to use Firefox or Chrome dev tools.

https://developer.mozilla.org/en-US/docs/Tools

https://developers.google.com/web/tools/chrome-devtools/

How to Add CSS to WordPress

Shout if you have any more questions.

Happy coding! ??

• This reply was modified 5 years ago by mark l chaves. Reason: Link to how-to CSS to WP

Hi Mark!

Thank you for your help! Here is my website: https://www.furudo.com
I’d like to apply the link effect on all my pages for all the links I paste.

Also, I’d like to use some horizontal/vertical lines such as done on this website: https://www.webdirector-guidbook.com/skill/writing.html on most of my articles as well, if not all.

Since I know nothing about programming, I’d be more than happy if you could directly give me the code for my own website. Thank you again! ??

Cool. Thanks for sharing your site. Ah, your links are easy. There are no pre-existing classes for it.

Here’s some CSS to get you started. Sorry, I don’t know what you mean by horizontal/vertical lines for the other design.

This will change all the links on your site. The keyword is all. Just as you requested.

a {
  border-bottom: 2px solid red; /* add !important if needed */
}

Refer to my CodePen for more examples. If you need someone to code all this for you, there are plenty of freelancers just like me out there to help you! ??

Happy coding!

Thanks again Mark!

Oops, I’m sorry, when I said ”all links” I meant ”all links I provide inside an article.” Let’s say I put the link google.com, I want it to be underlined at all times and highlighted only when hovered.

Basically, the same way links are shown on the Bustle website link I put in my original post.

Here is a picture of what I mean by ”vertical line”:

https://gyazo.com/edef1642f5814dc4073181bef78c3c71

There is a horizontal and vertical orange line, right? Does it require some coding as well?

Hi @furudo86,

Thanks for specifying. Ok. That’s easy too. I’ve already armed you with the code examples you need to know to be able to do this yourself. And, I’ve suggested you collaborating with a freelancer if you want someone else to code this for you.

Let’s do this. To narrow down (i.e. not all) what links you want to be fancy please try the following:

1. Create your version of my .fancy-underline class if you haven’t yet.
2. Add your custom class to your site.
3. For each link you want fancy, add class="fancy-underline" to the HTML a tag.

All the syntax is in my CodePen.

For the vertical separator (thanks for being more specific), I have a CodePen for that too (it’s a popular question).

https://codepen.io/marklchaves/pen/vYErMgv

Happy coding! ??