如何使用 :after 选择器创建一个带有文本的 div，它会自动扩展以适应文本的宽度？
听起来很复杂？也许是的。
我首先使用 div id 和 :after 选择器解决了这个问题，但是我们遇到了太多的兼容性和功能问题。我可以在 chrome 中使它看起来不错，但是每当我缩放对齐和放置时，都会变得很糟糕。
我有一个用 .png 文件替换背景颜色和 :after 的想法，但我不完全确定我会怎么做？下面的代码在左侧有一个指针，然后是一个长的水平主体，我可以将其从 .psd 拼接成 3 个 png 文件——一个用于指针，一个 1px 图像用于重复，然后一个用于完成 div。
我希望这很清楚。请参阅下面的代码，并随时问我任何问题！
#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;
}
请帮忙！