Insert text below username?

Development

AI-generated summary

In a discussion titled ‘Insert text below username?’ under the Dev category and tagged with CSS, DonkeyKongEnjoyer asks how to display custom text beneath usernames site-wide. They initially tried using ::after with CSS but found the text appeared inline. Alteras offered a solution using .names::after with display: block and flex-wrap: wrap, which worked on desktop but rendered above the username on mobile. Alteras later suggested adding order: 4 to fix the mobile layout, which DonkeyKongEnjoyer confirmed worked perfectly. merefield proposed using Group Default Titles as an alternative, allowing per-group customization and styling underneath usernames. Arkshine added that the Discourse API can be used for dynamic content insertion via decorateWidget, with accompanying CSS to adjust layout. This thread provides multiple approaches — pure CSS, group titles, and API-based solutions — to insert text below usernames, with mobile compatibility addressed via flexbox ordering.

1

Is there any way to insert a line of text below usernames? Ideally, I’d like this to appear under everyone’s username.

usernamebelow
usernamebelow453×121 23.6 KB

The CSS I used to achieve this is:

.username::after {
    content: 'website.com';
    font-size: 14px;
}

But obviously I’d like for it to appear below. Thanks!

2

Would this work for you?

image
image1536×266 36.8 KB

.topic-meta-data .names {
  flex-wrap: wrap;
}

.names::after {
  display: block;
  content: "hello world";
  font-size: 14px;
  width: 100%;
  flex: 1 0 100%;
  order: 4;
}

edit: added order property for mobile

3

Thank you! It works perfectly on Desktop, but for whatever reason it shows above the username on mobile.

4

Oh. Interesting. they have an additional order property on mobile.

You can add order: 4 to the after pseudo element and it should fix it.

5

You could achieve this with Group Default Titles.

Groups can have Default titles which appear by the username.

That way you can have a different one for each Group.

You could style those with CSS to appear underneath if you so chose.

6

Works perfectly, thank you!

7

You could also use the API if you need to adjust the content programmatically (to check the user, the post, etc.).

For example:

api.decorateWidget("poster-name:after", (dec) => {
    // "dec.attrs" to access the attributes of the post
    return dec.h("div", "meta.discourse.org");
  });

.topic-meta-data .trigger-user-card {
    flex-direction: column;
    align-items: flex-start;
}

image