[Resolved] Underline and Highlight Links (Exclude Images)

[Felix]

Hello team,

I implemented a few lines of css that shall underline and highlight links. It is doing this for all links now, text and images and looks weird.
Would you be able help and advice how to limit it to text only?

Kind regards

Osman

/* links are underlined (border-bottom) */
.entry-content a {
  border-bottom: 2px solid #f4b429;
  display: inline-block;
  line-height: 1.25;
    }

.entry-content a:hover {
    background-image: linear-gradient(120deg, #f4b429 0%, #f4b429 100%);
    background-repeat: no-repeat;
    transition: background-size 0.125s ease-in;
}

[Elvin]

Hi,

To limit it to text only, you’ll have to add more specificity in your CSS selectors.

Your code as it is lacks specificity as it selects ALL links inside .entry-content. To add specificity, you need to get the css class of atleast your link text’s parent so you can select them specifically.

You can check for css classes by inspecting your site.

Example: You can inspect your site on Google Chrome by pressing CTRL + SHIFT + I when you visit your page.

[Felix]

Hi Elvin,

Yes, that s what I assumed. Unfortunately, my CSS skills are rather limited: I created the CSS from various sources in the GP and other forums. Would you happen to know, which the class of the link text’s parent, that you re referring to, is? I am using the Merch Theme.

And that class-ID I must put between .entry-content and a{?

Thank you

[Elvin]

I’ve checked your site and it is indeed tricky to style your anchor tags because they don’t have classes and falls under .entry-content > ul > li > a for both image and text links.

They also don’t have unique attributes to each of them making it extra tricky.

And that class-ID I must put between .entry-content and a{?

For starters, if possible, try to add classes to your content blocks.

You can either do that manually, meaning you have to edit your contents to add them yourself. Note: this could be tedious, especially if you already have plenty of content.

Or

You can programmatically do it by JavaScript. (adding classes after DOM Content is Loaded)

But I’m afraid customization from scripting is outside of our support’s scope.

[Felix]

I understand. Thanks for the suggested solutions: I ll try to implement them.

In the meanwhile, should you come up with another (easier) option, please let me know.

Have a nice day!

[Elvin]

No problem. 🙂

[Felix]

A follow up question on link-formatting: I am trying to break the words in long links, in order for it to be displayed in more then one line, when displayed on a small screen.
I added two lines of css (overflow-wrap: break-word; word-wrap: break-word;), but it doesn’t get me what I want.
Could you have a look at the provided link and let me know, if you know what the issue might be?
Merci

/* links are underlined (border-bottom) */
.entry-content a {
  border-bottom: 2px solid #f4b429;
  display: inline-block;
  line-height: 1.25;  
  overflow-wrap: break-word;
  word-wrap: break-word;
    }

[Elvin]

To clarify, are you trying to achieve this? https://share.getcloudapp.com/xQuAREQj

If so, try replacing this property:

border-bottom: 2px solid #f4b429;

with these properties –

text-decoration: underline;
text-decoration-color: #f4b429;
text-underline-position: under;

Note: text-decoration styling is limited.

Ideally, we want to use .entry-content a > * selectors but the problem is, your anchor links are formatted inconsistently.

Some content links are structured <em><a>...</a></em> while some have <a><em>...</em></a> which is a nightmare to style.

<a><em>...</em></a> format is preferrable. If you can fix that, we could use .entry-content a > * and then add .entry-content a > img{border:none} on top of it so images won’t have underline.

[Felix]

Thank you, Elvin!

[Elvin]

No problem. Glad to be of any help.

[Author]

Posts