CSS hyperlink customization: Can't disable text decoration

Custom CSS & Theme Design
,
1

I thought about opening a bug but the disclaimer says that issues about CSS (snippets) are not considered as bugs.

Issue: I don’t manage to disable the underline with links in source mode/live preview. Changing themes don’t change anything so I believe this is a CSS global issue introduced by the use of CSS snippets.

I tried to use the solution from 2023 mentioned here: Custom css hyperlink text-decoration - #3 by ariehen

But sadly, no change anywhere. I believe that in the version in 2024 has a few different things. I CTRL+CAPS+I the thing to check the HTML tags and CSS classes, but specifying the correct chain goes nowhere.

I’m now seeking for help :slight_smile:

Things I also tried on my own:

.markdown-source-view span.cm-link a.cm-underline {
  text-decoration: none;
}
2

Can you share an example of the markdown (what’s written in the note) in a code block of what you are looking to change so folks can have a look?

3

You seem to be running into a case of CSS specificity, and your example rule doesn’t have high enough specificity to be applied. If you change your CSS to the following:

.markdown-source-view span.cm-link a.cm-underline {
  background-color: green;
  text-decoration: none; 
}

I’m guessing you’ll see that background color has changed, but the line is still there. So the CSS is kind of applied, but not all of it. And if we look at the Developer Tools window, focused on a line with just “example.com” as text, we see the following:

image
image895×195 54 KB

I’ve selected the Computed styles, and scrolled down to Text decoration, and there we can see “our” attempt coming as the middle line with none, but that the more specific .markdown-source-view.mod-cm6 .cm-link .cm-underline is the one which is actually used. And if you add the .mod-cm6 to your example, it’ll indeed kick into action.

The point I’m trying to make is that you need to be aware of the CSS specificity when making CSS rules. The link shows the precise definition, but the simpler variant is the more classes, ids, selectors you add the higher it gets.

In some cases you can add !important and make it more specific, but often you are better of locating the element within Developers tools and match that selector or use variables as defined in that selector to tweak your display.