My links on the site are suddenly not underlined anymore

Question

This might be a strange question, but somehow have all links lost their "underline", and I have no Idea why. I have no idea how to locate this issue? An example page is

https://psykpatient.se/202309/forslag/

and the link is "Hör av er!"

I guess there is somewhere in the CSS, but can't find anything?

Answer 1

(The following results I extracted using the Firefox Inspector)

The specific example you called out does not have any selector that would be make it underlined. Only selectors that make it specifically not underlined:

a {
  text-decoration: none;
}

.elementor a {
  text-decoration: none;
}

Other anchors(links) do have a rule for making it underlined but that is being overwritten. Take the comment area for example:

.comments-area a {
  text-decoration: underline;
}

.elementor a {
  text-decoration: none;
}

The .elementor a selector overwrites the .comments-area a not because of specificity but because of the order of appearance meaning .elementor a is added upon .comments-area a.

Reading your post it would suggest it has worked in the past so I think the problem is that somehow the order of enqueuing (of the stylesheets(css)) has been changed. Maybe you know something about this?

I don't have any experience with Elementor but I would advise you to do one of these if possible:

• Change the order of enqueueing (of the stylesheets)
• Add custom css: this is probably possible in Elementor. write something with higher specificity like: html .elementor a { text-decoration: underline; }. Note that this specific example would select more anchors than you probably want. Contact me if you need some help with a specific use case.
• Change the styles with elementor using the gui? Again I don't have any experience with Elementor.
• Change the theme stylesheet to have higher specificity on those specific selectors that you want underlined.

Hope this helped!