How to apply ‘new’ graphic to new topics

[oga]

When I logged in the community today, I Noticed, a Red “New” flag as shown here.

How was the RED “New !” flag achieved? Being that we will be publishing articles daily, I would like to use it to flag new Topics. How or what was used to create the flag?
Thanks

[sheng_hualuo (花落晓斩神)]

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

Thanks so much. I assume this is going to be added as a component, correct?
Being that it will be a global change that applies to all Themes, does it matter if the location is, “head”, “body” etc?

[sheng_hualuo (花落晓斩神)]

I suggest you create a theme component, name it custom CSS, and add all the CSS you need

[patrickemin]

Hi thanks for the tip, however, I use a translation for New in French which is a longer word (Nouveau), and the word is truncated. Would you know how to solve that? Thanks. @sheng_hualuo

[Arkshine]

Try to add the following properties

    height: auto;
    width: auto;

If it’s what you mean:

[patrickemin]

Thanks @Arkshine that works !