Cómo aplicar el 'nuevo' gráfico a los temas nuevos

[oga]

Cuando inicié sesión hoy en la comunidad, noté una bandera roja de “Nuevo” como se muestra aquí.

¿Cómo se logró la bandera roja de “¡Nuevo!”? Dado que publicaremos artículos diariamente, me gustaría usarla para marcar nuevos temas. ¿Cómo o qué se utilizó para crear la bandera?
Gracias

[sheng_hualuo (花落晓斩神)]

.badge-notification.new-topic::before {
    content: "¡Nuevo!";
    position: absolute;
    right: -1.1em;
    top: -0.85em;
    background: var(--quaternary);
    transform: rotate(12deg);
    font-size: var(--font-down-2);
    letter-spacing: .05em;
    padding: .2em .5em;
    border-radius: 4px;
    font-weight: normal;
    color: var(--secondary);
}

[oga]

Muchas gracias. Supongo que esto se agregará como un componente, ¿correcto?
Dado que será un cambio global que se aplica a todos los temas, ¿importa si la ubicación es “head”, “body”, etc.?

[sheng_hualuo (花落晓斩神)]

Te sugiero que crees un componente temático, lo llames CSS personalizado y agregues todo el CSS que necesites.

[patrickemin]

Hola, gracias por el consejo, sin embargo, uso una traducción para “New” en francés que es una palabra más larga (Nouveau), y la palabra se trunca. ¿Sabrías cómo solucionarlo? Gracias. @sheng_hualuo

[Arkshine]

Intenta añadir las siguientes propiedades

    height: auto;
    width: auto;

Si es lo que quieres decir:

[patrickemin]

¡Gracias @Arkshine, eso funciona!