Сделать границу пустого элемента исчезнуть / Пустое правило не работает

Question

Я построил несколько «тегов» над заголовком моей конструкции html в строке. Проблема в том, что они не обязательно заполнены текстом. Если один из этих элементов пуст, он оставляет границу «сосредоточенной» на «точке». Я попробовал это с пустым правилом, но это не работает. Я применил его к каждому классу элементов в моем коде, а не только к «тегам».

.tags:empty{
    display:none;
    height: 0px;
    border: none;
}

 <div class="tags"> <span class="icons2"> <p class="jobAreaDescription">{{jobArea}}</p> </span><span class="icons2"> <p class="leitung">{{leitung}}</p> </span><span class="icons2"> <p class="tag3">{{tag3}}</p> </span> <span class="icons3"> <p class="neu">{{neu}}</p> </span></div>      

Если вам нужно больше кода, просто спросите, но я думаю, что этого достаточно. Спасибо.