Custom css hyperlink text-decoration

[Gerit]

Hi there,

I’ve got an issue with custom css.

What I’m trying to do

I use the Obsidian standard theme and I’d like to remove the underlined style from all hyperlinks and set the text-decoration to none.

Things I have tried

I tried to find some suitable css snippets from GitHub - Dmytro-Shulha/obsidian-css-snippets: Most common appearance solutions for Obsidian now in a single place. Initially collected by Klaas: https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474, but nothing found. So I created the following css file and enabled the css file in the settings:

style.css

a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none;}
a:active {text-decoration: none;}

Markdown:

1. <a href="https://example.com/">example.com</a>
2. https://example.com/
3. [example.com](https://example.com/)

The css code takes effekt on the html code only(see 1.), but not on the pure text link (see 2.), neither on the markdown (see 3.). Do you have an idea to solve this?
kind regards
Gerit

[Olondre]

Try this CSS Snippet:

	/* << Reading View >> */
	.markdown-preview-view .external-link {
		text-decoration: none;
}
	/* << Live Preview >> */
	.markdown-source-view.mod-cm6.is-live-preview .cm-link .cm-underline {
		text-decoration: none;
}

This works for all external links in Reading View & Live Preview EXCEPT FOR the pure text link in Live Preview. Haven’t found a solution to that.

FYI: You can always open the developer console in Obsidian to find the right selectors for the CSS you want to apply. The Keyboard Shortcut is Ctrl/Cmd + Shift + I

Hope this helps.

[ariehen]

Try the above, but this should take care of 2. and 3.

body {
 --link-external-decoration: none; 
} 

Have a look here:

Getting comfortable with Obsidian CSS

While using Obsidian, if you press CTRL-SHIFT-I (option-cmd-i for mac) then it will bring up the developer window. In the developer window, at the top left is an icon with a pointer in a box. This allows you to select elements on the screen and see how to refer to them and what styles. I will occasionally update this post with more pictures of how to do stuff. [Developer Tool] You can hover over items to see what they do and then click on an item to select it. Then go down to the styles secti…

[Olondre]

Wonderful. Forgot about the new selectors for a second. Thanks for reminding me to update all of my css, to simplify it Lots to do.

[Gerit]

Thanks @Olondre and @ariehen, that’s it!
And Ctrl-Shift-I is a good help!