テキストの幅に合わせて自動的に拡張される :after セレクターを使用して、テキストを含む div を作成するにはどうすればよいですか?
複雑に聞こえますか？多分そうです。
最初に div id と :after セレクターを使用してこれを解決しましたが、互換性と機能に関する問題が多すぎます。私はクロムでこれを問題なく見せることができますが、配置をズームすると配置がおかしくなります。
background-color と :after を .png ファイルに置き換えるアイデアがありますが、どうすればよいかよくわかりません。以下のコードには、左側にポインターがあり、次に長い水平の本体があります。これを .psd から 3 つの png ファイルにスプライスできます。
これが明確であることを願っています。以下の私のコードを見て、私に質問をしてください!
#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;
}
助けてください！