Prevent content wrapping around: to selector content

Question

I know that I can just use the image for this, but who in their right mind really wants to?

I am trying to find a neat way to change the prefix color of a list of items in an unordered list.

I can do this quite simply with the :before selector. (Yes, I know about 7th, I’m lucky, it doesn’t matter).

eg.

 .ul1 li { list-style-type:none; } .ul1 li:before, .ol1 li:before { content:"\25CF"; /*escaped unicode coloured circle*/ color:#F68A39; font-weight:bold; font-size:18px; text-align:right; padding-right:6px; width:10px; } 

The problem is that the contents of my list will now span the contents of :before . Is there any way to prevent this?

Here are some markups to start with .. Greetings!

 <ul class="ul1"> <li> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only </li> <li> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only </li> <li> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only </li> <li> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only </li> </ul> 

Answer 1

You can do this by placing the :before contents absolutely on the li element, and then applying a marker or pad to the li element. Fine tune bullet positioning with top , left , right and / or bottom to complete.

Here is an example: http://jsfiddle.net/bwwsV/1/