Overcomplicated prefixing

by MegaScience

HTML

<span class="unsafe task">Text 1</span>
<span class="safe task">Text 2</span>
<span class="task">Text 3</span>
<span class="safe">Text 4</span>
<span class="unsafe">Text 5</span>
<span>Text 6</span>

CSS

@counter-style anomalyType {
    system: fixed;
    symbols: "\200B" "🛡️" "⚠️" "📝";
}

span {
    display: block;
    counter-reset: isSafe 1 isTask 1;

    &.safe {
        counter-set: isSafe 2;
    }

    &.unsafe {
        counter-set: isSafe 3;
    }

    &.task {
        counter-reset: isTask 4;
    }

    &::before {
        content: counter(isSafe, anomalyType) counter(isTask, anomalyType);
    }

    &::after {
        content: "-" counter(isSafe) " " counter(isTask);
    }
}

JavaScript

//         content: "Type" counter(isSafe, anomalyType) "Task" counter(isTask, anomalyType);