Como aplicar o gráfico ‘novo’ em novos tópicos

[oga]

Quando acessei a comunidade hoje, notei uma bandeira vermelha de "Novo", como mostrado aqui.

Como a bandeira vermelha "Novo!" foi alcançada? Como publicaremos artigos diariamente, gostaria de usá-la para sinalizar novos tópicos. Como ou o que foi usado para criar a bandeira?
Obrigado

[sheng_hualuo (花落晓斩神)]

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

Muito obrigado. Suponho que isso será adicionado como um componente, correto?
Como será uma alteração global que se aplica a todos os temas, importa se a localização for “head”, “body”, etc.?

[sheng_hualuo (花落晓斩神)]

Sugiro que você crie um componente de tema, nomeie-o como CSS personalizado e adicione todo o CSS que você precisa.

[patrickemin]

Olá, obrigado pela dica, no entanto, eu uso uma tradução para Novo em francês que é uma palavra mais longa (Nouveau), e a palavra é truncada. Você saberia como resolver isso? Obrigado. @sheng_hualuo

[Arkshine]

Tente adicionar as seguintes propriedades

    height: auto;
    width: auto;

Se é isso que você quer dizer:

[patrickemin]

Obrigado @Arkshine, isso funciona!