# Colored badge based on username

**URL:** https://meta.discourse.org/t/colored-badge-based-on-username/39253
**Category:** Support
**Created:** [February 9, 2016, 12:03am UTC](https://meta.discourse.org/t/colored-badge-based-on-username/39253 "2016-02-09T00:03:05Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![jhosein](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jhosein/32/50963_2.png) [@jhosein](https://meta.discourse.org/u/jhosein)
#### Post date: [February 9, 2016, 12:03am UTC](https://meta.discourse.org/t/colored-badge-based-on-username/39253/1 "2016-02-09T00:03:05Z")

</div>

I’ve got this going based on permissions, but I cant figure out how to get it to work based on a specific username.

```plaintext
span.moderator i:after {
  content: "MOD";
  display: inline;
  background-color: #AA00AA;
  border-radius: 3px;
  font-size: 0.9em;
  font-weight: bold;
  font-style: normal;
  padding: 2px 4px;
  color: #fff;
  line-height:1;
  margin:0 0 0 5px;
}
```

I’d rather do this via CSS and avoid doing this via user groups.

---

<div class="post-metadata">

### Author: ![Yuun](https://avatars.discourse-cdn.com/v4/letter/y/977dab/32.png) [@Yuun](https://meta.discourse.org/u/Yuun)
#### Post date: [February 9, 2016, 12:16am UTC](https://meta.discourse.org/t/colored-badge-based-on-username/39253/2 "2016-02-09T00:16:48Z")

</div>

I’m not sure if this is exactly what you’re going for, but this:

```plaintext
.names .username a[data-user-card="username"]:after {
    stuff
}

```

Would put your MOD label (in this case) right next to `username`’s… username.

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [June 8, 2024, 12:45pm UTC](https://meta.discourse.org/t/colored-badge-based-on-username/39253/3 "2024-06-08T12:45:56Z")

</div>

This topic was automatically closed after 3042 days. New replies are no longer allowed.