A styling pattern where internal links are given a subtle highlight, while external links aren’t. This allows people to quickly identify which kind of content the link is referencing.
Styling
To achieve this, I use code that looks something like this (you can always Inspect Element to see the most up to date code).
/* Works because internal links point directly,
without using http/https. We then filter out specific
types of links */
a:not([href^=http]):not([class*=md-]) {
border-radius: 0.25rem;
background-color: var(--md-accent-fg-color--transparent);
padding: 2px 1ox;
}Examples
Slack
.c-member_slug--link, .c-member_slug--mention {
background: #e8912d66;
color: rgba(var(--sk_secondary_highlight,242,199,68);
border-radius: 3px;
padding: 0 2px 1px;
ClickUp (when Someone Mentions you)
color: var(--cu-content-primary);
background-color: var(--cu-background-primary-subtle);
position: relative;
padding: 2px 5px;
margin: -2px 0;
border-radius: 3px;
font-weight: 500;