Vertically center bullets with long text in CSS and Elementor | How to align bullets with list items
In this tutorial, I will show you how to vertically center and align bullets with text in CSS in Elementor using unordered lists. If you have a list item that contains a lot of text and has multiple lines, the default bullet might still be aligned to the top of the list item. If you want to make it centrally aligned with your text, you can first clear the list style. This will remove the default bullets that are set as 'markers'. Then, you can add a 'before' pseudoelement to your list items and make them into a circle or a bullet using a border and an empty content. You can control the size of the bullet and its color, as well as spacing and padding.
Before pseudoelement gives you many more options for positioning as opposed to the default marker bullet.
After that, just use the display flex and align-items: center property of your list items. This will vertically center and align the bullet with the longer text and multiple lines within your bullet list.
This also works for custom bullets, where you can use a custom png image of svg vector as your bullet.
💻 Grab the CSS code here:
https://www.cssgamelab.com/2024/11/28...
🚀 Interactive CSS Basics course for designers and non-coders:
https://www.cssgamelab.com/
👉 Get 20% off using the code VELVET20OFF at Checkout.
––––––––––––––––––––––––––––––
PURCHASE AND DOWNLOAD ELEMENTOR PRO:
https://be.elementor.com/visit/?bta=6...
––––––––––––––––––––––––––––––
SIMPLE CUSTOM CSS AND JS PLUGIN:
To use custom CSS code with Elementor FREE, I am using the Simple Custom CSS and JS plugin for Wordpress that you can download here:
https://wordpress.org/plugins/custom-...
Have fun and thanks for watching!
If this tutorial helped you, please share or subscribe.
––––––––––––––––––––––––––––––
This video and description may contain affiliate links. If you click on a link and make a purchase, I will receive a commission from the sale. That way you are supporting my channel and allowing me to keep making videos and posts like this. I only promote products that I use, have experience with and support, such as Elementor Pro.
––––––––––––––––––––––––––––––
Have a specific problem in Elementor that you don't know how to solve with CSS? Comment below to let me know which video you would like to see next!
––––––––––––––––––––––––––––––
MUSIC:
Artist: Corbyn Kites
Track Title: Staycation
––––––––––––––––––––––––––––––
