¿Insertar texto debajo del nombre de usuario?

[DonkeyKongEnjoyer (DKE)]

¿Hay alguna forma de insertar una línea de texto debajo de los nombres de usuario? Idealmente, me gustaría que esto apareciera debajo del nombre de usuario de todos.

El CSS que utilicé para lograr esto es:

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

¡Pero obviamente me gustaría que apareciera debajo. ¡Gracias!

[Alteras (Steven Chang)]

¿Te funcionaría esto?

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

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

editar: se añadió la propiedad order para móvil

[DonkeyKongEnjoyer (DKE)]

@Alteras

¿Funcionaría esto para ti?

¡Gracias! Funciona perfectamente en el escritorio, pero por alguna razón aparece encima del nombre de usuario en el móvil.

[Alteras (Steven Chang)]

Oh. Interesante. Tienen una propiedad order adicional en el móvil.

Puedes añadir order: 4 al elemento pseudo after y debería solucionarlo.

[merefield (Robert)]

Podrías lograr esto con Títulos Predeterminados de Grupo.

Los grupos pueden tener títulos predeterminados que aparecen junto al nombre de usuario.

De esa manera, puedes tener uno diferente para cada grupo.

Podrías estilizar esos con CSS para que aparezcan debajo si así lo deseas.

[DonkeyKongEnjoyer (DKE)]

@Alteras

Puedes añadir order: 4 al pseudo-elemento after y debería solucionarlo.

¡Funciona perfectamente, gracias!

[Arkshine]

También podrías usar la API si necesitas ajustar el contenido programáticamente (para verificar al usuario, la publicación, etc.).

Por ejemplo:

api.decorateWidget("poster-name:after", (dec) => {
    // "dec.attrs" para acceder a los atributos de la publicación
    return dec.h("div", "meta.discourse.org");
  });

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