Как показать иерархию категорий в списке тем с помощью CSS

Всем привет и спасибо за уделённое время на чтение. Я искал в форуме несколько часов, пробовал немного с помощью Chat GPT и тестового форума, но мне нужна помощь.

В нашей НКО мы хотим перестроить категории так, чтобы у каждого отдела была своя категория с тремя подкатегориями:

В целом, это должно выглядеть примерно так:

  • Главная категория = название отдела
  • Подкатегории:
    • новости
    • вопросы
    • внутреннее

Если представить, что у вас 10 и более отделов, публикующих новости, то в списке результатов невозможно будет понять, от какого отдела новость, поскольку там отображается только текущая (под)категория.
Вот пример тестового инстанса, где созданы посты в разных подкатегориях, все названные faq:

У вас есть разные пузыри с разделённым цветом, что сигнализирует о принадлежности к подгруппе, но всё равно с первого взгляда непонятно, к какому отделу относится пост.

Таким образом, в списке результатов есть элемент

link-bottom-line

Если бы он выглядел так:

ember 80 ember-view topic-category

как в представлении темы (ThreadView), это было бы идеально.

Также в результатах поиска это отображается так, как нужно, просто чтобы вы поняли суть:

У меня нет идей, как это реализовать, так как я не знаю CSS, и это сложнее, чем просто что-то скрыть.

Надеюсь, кто-то здесь найдёт время помочь мне с этим, это было бы очень полезно, и мы сможем продолжить перестройку нашего форума.

Если возникнут вопросы, дайте знать.

Огромное спасибо и наилучшие пожелания.

круто, большое спасибо за такую мгновенную помощь и решение :heart: