← All examples

Mastodon: highlight @mentions

Gives @username mentions a clear green tint and background so they stand apart from hashtags and links.

Code to copy

/* Tint @mentions to separate them from regular links */
.status__content a.mention:not(.hashtag),
.status__content a[href*="/@"]:not([href*="/tags/"]) {
  color: #2e8b57 !important;
  font-weight: 600 !important;
  background: rgba(46, 139, 87, 0.1) !important;
  padding: 1px 4px !important;
  border-radius: 3px !important;
}

How to use this example

1. Copy the code with the button above.
2. Install JustZix (2 minutes) and open the extension on the target page.
3. Add a new rule matching that page.
4. Paste the code into the rule's CSS panel and save — the effect appears instantly.