内容
我弄了个优化链接显示效果的css代码，在光标悬停时会有下滑线动效。另外，我默认设置了一些内链和外链的颜色，如果有需要可以自行调整。感兴趣自取。
!WARNING
可能跟一些主题不适配。
CSS代码片段
/***********************
* 跨模式通用链接样式
***********************/
/* 编辑模式选择器 */
.cm-s-obsidian span.cm-hmd-internal-link, /* 编辑模式内链 */
.cm-s-obsidian span.cm-link, /* 编辑模式外链 */
/* 预览模式选择器 */
.markdown-preview-view .internal-link, /* 预览模式内链 */
.markdown-preview-view .external-link { /* 预览模式外链 */
text-decoration: none !important;
transition: all 0.3s ease !important;
position: relative;
padding-bottom: 2px;
}
/*****颜色定义*****/
/* 编辑模式内链 */
.cm-s-obsidian span.cm-hmd-internal-link,
/* 预览模式内链 */
.markdown-preview-view .internal-link {
color: #4f46e5 !important;
}
/* 编辑模式外链 */
.cm-s-obsidian span.cm-link:not(.cm-hmd-internal-link),
/* 预览模式外链 */
.markdown-preview-view .external-link {
color: #3b82f6 !important;
}
/*****下划线特效*****/
/* 通用伪元素 */
.cm-hmd-internal-link::after,
.internal-link::after, /* 预览模式内链 */
.external-link::after, /* 预览模式外链 */
.cm-link:not(.cm-hmd-internal-link)::after { /* 编辑模式外链 */
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 0;
transition: width 0.3s ease;
}
/* 内部链接渐变 */
.cm-hmd-internal-link::after,
.internal-link::after {
background: linear-gradient(90deg, #4f46e5 0%, #818cf8 100%);
}
/* 外部链接渐变 */
.external-link::after,
.cm-link:not(.cm-hmd-internal-link)::after {
background: linear-gradient(90deg, #3b82f6 0%, #93c5fd 100%);
}
/*****悬停效果*****/
.cm-hmd-internal-link:hover::after,
.internal-link:hover::after,
.external-link:hover::after,
.cm-link:not(.cm-hmd-internal-link):hover::after {
width: 100%;
}
/*****聚焦状态*****/
.cm-active.cm-fat-link {
background: rgba(37, 99, 235, 0.1) !important;
border-radius: 4px;
padding: 0 4px !important;
}
效果演示
阅读模式
编辑模式
