How to add the number of selected elements in the layout to the menu?

Question

css

Hello, please tell me, I have a menu (filter), I need to display the number of selected elements in this filter above the name of the filter, if they are selected of course.

Here in the screenshot I tried to do this using the before pseudo-element, but the problem is that this is bootstrap4 and the menu is made on flex, since the height of the first element has increased, the height of all other elements has also increased, and it jumps like this. Then I actually tried to apply to the before css property position: absolute; now it does not jump, but the inscription itself 5 out of 22 is not in the center.

Please tell me how you can do it, what would be like in the first screenshot, here is the inscription "5 out of 22" in the center and so that the menu does not jump like in the first screenshot.
Thank you in advance for your reply!

Answer 1

You, as I understand it, generate elements on the go. Make empty elements above the menu, like a span, style them to be at the top, via flexbox, grid, position absolute. Then fill them with the number of selected elements via js.
To prevent menu items from going to the top, you can set them to align-self: flex-end . Or write a flex end to their parent so that they cuddle to the bottom
. Why didn't you manage to align to the center with the absolute? Set before to - left: 50%;, transform: translateX(-50%);

Answer 2

https://codepen.io/topicstarter/pen/zavOMm?editors=0010