How do I create a div that has text over a background (with a pointer/arrow) creating the need to automatically expand the width?

Question

How do I create a div with an :after selector, with text, that automatically expands to fit the width of the text?

Sound complicated? Maybe it is.

I first solved this with a div id and :after selector however we have encounter too many issues with compatibility and functionality. I'm able to make this look OK in chrome however whenever I zoom the alignment and placement gets screwy.

I have an idea to replace the background-color and :after with .png files but I'm not totally sure how I would do it? The code below has a pointer on the left and then a long horizontal body, which I could splice from a .psd into 3 png files -- one for the pointer, a 1px image to repeat and then one to finish off the div.

I hope this is clear. See my code below and feel free to ask me any questions!

#div1 {
padding:6px 0 0 0;
left:49px;
position:relative;
float:left;
height:35px;
background-repeat:no-repeat;
background-position:left
}

#div1 p {
font-family:sans-serif,Helvetica;
font-size:14px;
font-style:italic;
text-decoration:none;
color:#FFF;
margin:5px 0 0 -2px;
padding-right:10px;
text-shadow:0 1px 0 #000
}

.div2 {
width:auto;
min-height:30px; 
max-width:420px;
background: #fc1e10;
color:white;
padding:5px 10px 0 10px;
position:relative;
word-wrap:break-word;
margin-bottom:2em;
margin-left:20px;
-webkit-box-shadow:3px 3px 0 rgba(0,0,0,.3), inset 0 2px 2px rgba(253,116,84,.9);
box-shadow:3px 3px 0 rgba(0,0,0,.3), inset 0 2px 2px rgba(253,116,84,.9);
border-bottom:solid 1px;
border-bottom-color:#fd7454;
border-top:solid 1px;
border-top-color:#f11d1a;
}

.div2:after { 
content:'';
display:block;
position:absolute;
top:-.05em;
left:-2.16em; 
width:0;
height:0;
border-color: transparent #fc1e10 transparent transparent;
border-style: solid;
border-width: 1.14em;
}

Please help!

Answer 1

它是否必须为：after，是否可以为div内的跨度？