Archived topic
Link formatting
5 replies · Started by Fredrik on June 7, 2022
Hi!
I would like to format the links on some of my sites so they get the same kind of look as they do on this page:
https://jamesclear.com/five-step-creative-process
In other words, I want the link to be underlined, with some distance between the word(s) and the line. When I hover over the linked word(s), I want the line to change colour and a background to appear behind the text.
Is there a way to accomplish this?
Hi Fredrik,
Give this CSS a try:
.inside-article a {
background-image: linear-gradient(to bottom, #FEF5DF 0%, #FEF5DF 100%);
background-repeat: no-repeat;
background-size: 100% 0;
background-position: 0 111%;
padding: 2px 2px 0px 0;
border-bottom: 2px solid #E2DDCA;
transition: all 0.3s;
}
.inside-article a:hover {
background-size: 100% 88%;
cursor: pointer;
border-bottom: 2px solid #f8cd5f;
}Adding CSS: https://docs.generatepress.com/article/adding-css
That worked like a charm. Thank you!
No problem :)
I added the same code to my site and nothing happened. I added it the additional CSS section.
Hi Derek,
May you kindly start a new topic, and add the link to your site in the private information field?: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information
We’ll take a look why it isn’t working for you.
Hope to hear from you soon!
