Come applicare la grafica 'nuova' ai nuovi argomenti

[oga]

Quando sono entrato nella community oggi, ho notato una bandierina rossa “New” come mostrato qui.

Come è stata ottenuta la bandierina rossa “New!”? Dato che pubblicheremo articoli ogni giorno, vorrei usarla per segnalare nuovi argomenti. Come o cosa è stato utilizzato per creare la bandierina?
Grazie

[sheng_hualuo (花落晓斩神)]

.badge-notification.new-topic::before {
    content: "Nuovo!";
    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]

Grazie mille. Presumo che questo verrà aggiunto come componente, corretto?
Dato che sarà una modifica globale che si applica a tutti i temi, ha importanza se la posizione è “head”, “body”, ecc.?

[sheng_hualuo (花落晓斩神)]

Ti suggerisco di creare un componente tematico, chiamarlo CSS personalizzato e aggiungere tutto il CSS di cui hai bisogno.

[patrickemin]

Ciao, grazie per il suggerimento, tuttavia, uso una traduzione per “New” in francese che è una parola più lunga (Nouveau) e la parola viene troncata. Sapresti come risolvere? Grazie. @sheng_hualuo

[Arkshine]

Prova ad aggiungere le seguenti proprietà

    height: auto;
    width: auto;

Se è quello che intendi:

[patrickemin]

Grazie @Arkshine, funziona!