How to change external links and internal link colour and remove underline

Custom CSS & Theme Design
,
1

Targeting: [[Data Handling#^X1|Replace A Character With Next Lines]]
Actual issue: I want to added blue colour and remove underline
Note: Iam able to change the font style.
I have tried many different codes through AI
Present code used in .css file:

/* Default color for all links in both views */
.markdown-preview-view a,
.cm-s-obsidian a
{
color: #007BFF !important;
font-family: ‘Playfair Display’, serif;
font-style: italic;
text-decoration: none !important;
}

/* Internal links (wiki-links, aliases, block refs) */
.markdown-preview-view a.internal-link,
.cm-s-obsidian a.internal-link
{
color: #007BFF !important;
font-style: italic;
text-decoration: none !important;
}

/* External link color in both views */
.markdown-preview-view a.external-link,
.cm-s-obsidian a.external-link
{
color: #007BFF;
font-family: ‘Playfair Display’, serif;
font-style: italic;
}

/* Unresolved (non-existent) links color in both views /
.markdown-preview-view a.is-unresolved,
.cm-s-obsidian .cm-hmd-internal-link.cm-hmd-unresolved,
.cm-s-obsidian span.cm-hmd-unresolved
{
font-family: ‘Playfair Display’, serif;
font-style: italic;
color: #007BFF !important; / Darker color for unresolved links */
}

/* Dotted underline on hover for unresolved links in reading view */
.markdown-preview-view a.is-unresolved:hover
{
text-decoration: none !important;
}

/* Dotted underline on hover for unresolved links in editing view */
.cm-s-obsidian .cm-hmd-internal-link.cm-hmd-unresolved:hover,
.cm-s-obsidian span.cm-hmd-unresolved:hover
{
text-decoration: none !important;
}
img

2

These variables can set your link colors and remove underlines:

body {
	--link-color: aqua;
	--link-external-color: green;
	--link-unresolved-color: pink;
	
	--link-color-hover: antiquewhite;
	--link-external-color-hover: maroon;
	
	--link-decoration: none;
	--link-external-decoration: none;
	
	--link-decoration-hover: none;
	--link-external-decoration-hover: none;
}

If you plan to do more CSS in Obsidian, you can save a lot of time by looking up the info either with this method in the pinned post or from these lists in the docs instead of asking a GPT.

1 Like