[Resolved] Link formatting

[Fredrik]

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?

[Ying]

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

[Fredrik]

That worked like a charm. Thank you!

[Ying]

No problem 🙂

[Derek]

I added the same code to my site and nothing happened. I added it the additional CSS section.

[Fernando]

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!

[Author]

Posts