Как сверстать такое, не меняя структуры?

Question

[SANTA2112]

Всем привет, дали знакомому тестовое задание. Сверстать 2 блока не меняя структуры html. Мне самому стало интересно, и я зашел в тупик...
Структура должна быть такой:

<div class="status"></div>
<div class="status" data-count="5"></div>

На выходе должно получится вот так (см. ниже)


То что получилось у меня
jsfiddle

Как избавиться от красной точки при отсутствии data-атрибута?

Comments

[monochromer]

Возможно, стоит дополнить, что счётчик не должен выводиться при значении 0

Answer 1

[Алексей Ярков]

.status[data-count]::after

Comments

[SANTA2112]

Спасибо, чет тупанул) Совсем забыл)

[Алексей Ярков]

SANTA2112, та не за что

Answer 2

[Rustam Bainazarov]

Data-атрибуты -- тоже CSS-селекторы.

Comments

[SANTA2112]

Спасибо, чет тупанул) Совсем забыл)

Answer 3

[Александр]

Я сделал с помощью флексов: