Как добавить в меню кол-во выбранных элементов в верстке?

Question

[Сергей Хлопов]

Здравствуйте, подскажите пожалуйста, у меня есть меню (фильтр) мне нужно выше наименования фильтра, вывести кол во выбранных элементов в данном фильтре если они выбраны конечно.

Вот на скриншоте это я попытался сделать с помощью псевдоэлемента before, но проблема в том что это bootstrap4 и меню сделано на flex, так как высота первого элемента увеличилась, то увеличилась высота и у всех других элементов, и оно вот так вот скачет. Потом я собственно попытался применить к данному before css свойство position: absolute; теперь не скачет, но сама надпись 5 из 22 не по центру.

Подскажите пожалуйста как можно сделать, что бы было как на первом скриншоте, вот эта надпись "5 из 22" по центру и что бы меню так не прыгало как на первом скриншоте.
Заранее благодарю Вас за ответ !

Comments

[Максим Тимофеев]

в песочницу код выкладывайте (1 вариант, с absolute точно плохая идея), не видя вашей верстки сложно что-то советовать.

[Сергей Хлопов]

Максим Тимофеев, Благодарю за ответ, да уже решил проблему эту

Answer 1

[boga-net]

Вы, как я понял, на ходу генерируете элементы. Сделайте пустые элементы над меню, например span, задайте им стили, чтобы они были вверху, через flexbox, grid, position absolute. Потом наполняйте их числом выбранных элементов через js.
Чтобы элементы меню не уходили наверх, можно задать им align-self: flex-end. Или флекс энд прописать у их родителя,чтобы они прижимались к низу
А почему у вас с абсолютом не получилось выровнять по центру? Задайте для before - left: 50%;, transform: translateX(-50%);

Comments

[Сергей Хлопов]

Благодарю за ответ, да я вот примерно так и сделал, создал span над каждым элементов меню и у каждому span задал visibility: hidden; по умолчанию, а когда выбираем какие либо элементы в фильтре то тогда visibility: hidden; убираю и вставляю числа в этот span и всё, просто приравнял всё к одной высоте получается