Prevent wrapping of content around :before selector content

Question

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

I'm trying to find a neat way of changing the colour of the list-item prefix in an unordered list.

I can do this quite easy using the :before selector. (Yeah I know about ie7, lucky me it doesn't matter).

e.g.

.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 I have is that the content in my list-item will now wrap around the :before content. Is there a way of preventing this?

Here's some markup to to start with.. Cheers!

<ul class="ul1">
    <li>
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry. Lorem Ipsum has been the industry's 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's 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's 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's 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 it by positioning the :before content absolutely to the li element, and then applying a margin or padding to the li element. Fine-tune the bullet positioning with, top,left,right, and/or bottom to finish up.

Here's an example:

.ul1 li
{
    list-style-type:none;
    padding-left: 16px;
    position: relative;
}

.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;
    position: absolute;
    left: 0;
    top: -0.2em;
}

<ul class="ul1">
    <li>
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry. Lorem Ipsum has been the industry's 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's 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's 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's 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>