Is it possible to create a div with an :after selector, containing text that automatically adjusts its width to fit the content?
Seems like a complex task, right? It sure can be.
I initially tried achieving this using a div id and :after selector, but ran into compatibility and functionality issues. While I managed to make it work in Chrome, zooming caused alignment and placement problems.
I am contemplating replacing the background-color and :after with .png files, but I'm unsure about the process. The current code includes a pointer on the left and a long horizontal body, which could be segmented from a .psd file into 3 png files - one for the pointer, another for repeating a 1px image, and the last one to complete the div.
I hope my explanation is clear. Take a look at the code below and do not hesitate to ask 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;
}
Your assistance would be greatly appreciated! Thank you.