Changing Bullet Style AND Position in Your Lists

We saw in our last posts how to easily change the bullet style of ordered and unordered lists. You may want to visit those posts.

We can also change the position of the bullet: inside or outside. The default is outside - as illustrated below with this unordered list:

• Here is the default bullet position
  
• Multiple lines will line up neatly underneath each other as shown. (If necessary, narrow your browser window until the line wraps.)
  

But you can specify "inside" and have the bullets indent even more! This can often enhance the presentation of your bullets.

• After creating your list, edit the UL tag to include the code in the next bullet
• <ul style="list-style-position: inside;">
• However, be aware that when using the inside position, any text that wraps will flow underneath the bullet as shown. You may or may not like the way this looks.

This works for numbered lists also, as shown below:

1. <ol style="list-style-position: inside;">
2. But just like an unordered list, lengthy text will flow underneath the bullet as shown. (Narrow your browser window if necessary.)
   

What if you want to change the bullet style and indent the bullet?

• Just type the UL tag exactly as below.
• <ul style="list-style-type: square; list-style-position: inside;">

Of course, the same applies to an ordered list. Here we have changed the bullet to Roman Numeral, and positioned the bullet inside:

1. Just type the OL tag exactly as below.
2. <ol style="list-style-type: upper-roman; list-style-position: inside;">

Bullets are so cool!

►  Check out some of our other posts about styling bullets: How to Change the Bullet Style of your Ordered List and How to Change the Bullet Style of your Unordered List

If this post has been helpful, please consider linking to our blog or sharing!