[SOLVED] Css - how to add an image outside a text box (on the left side but touching the box)

Css - how to add an image outside a text box (on the left side but touching the box)

On my website I'd like to add the small "+" icon next to each white text box but I have no idea how to do that. What would be your suggestions? Many thanks,

Here is the html code:

<div class="presentation-plusbox">
<p>Expertise dans l'industrie</p>
<p>blblablabla</p>
<p>blabla</p>
</div>

and here is the css code: .presentation-plusbox

{
    width: 500px;
    background-color:#FFFFFF;
    padding:10px;   
    margin-left:25%;
    color:#000000;
    margin-bottom:8px;
    opacity:0.95;
    filter:alpha(opacity=95); /* For IE8 and earlier */
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

Solution

You can use the :before - http://jsfiddle.net/fgRRw/

div:before {
    content: "+";
    height: 30px;
    width: 30px;
    text-align: center;
    line-height: 30px;
    background: orange;
    color: #fff;
    display: block;
    left: -30px;
    position: absolute;
}

Just a note - :before is not supported in IE7 and below LINK