：擬似要素はサファリ

Question

で働いていないの後、私はダイナミックテキストとスタイルの文を持っています。テキストが長すぎる場合があり、ボックスの外側の端にアンカーをプッシュします。 span.price-differenceの後にテキストを折り返しますが、アンカーボタンはpの右側に配置する必要があります。

Iが.price-differenceに:after擬似要素を追加しました。私はそれをcontent: ''とdisplay: blockに設定しました。 FF、Chrome、IE（SafariはサポートしていないIE8を含む）で動作します。

あり簡単な答えは別のspanに.price-differenceを次のテキストをラップする、である、とblockに設定しますが、HTMLを変更するJSPファイルに変更を加えるために、バックエンドの開発を必要とする、面倒である、と私は願っていますそれを避けるために。 CSSのみのソリューションを探しています（存在する場合）。

<p class="upsell"> Upgrade To 
    <span class="stateroom-upgrade"> Concierge Class </span> 
    for an additional 
    <span class="price-difference">$7.14 USD </span> 
    per person per day 
    <a href="" class="ccButtonNew"><span>View Upgrades</span></a> 
</p> 

CSS

.upsell { 
    background: none repeat scroll 0px 0px #FAFAFA; 
    border-top: 2px dashed #E8E8E8; 
    color: #666; 
    display: block; 
    font-size: 11.5px; 
    font-weight: 600; 
    margin: auto 19px 5px; 
    padding: 8px 0px 8px 8px; 
    position: relative; 
    text-transform: none; 
    white-space: nowrap; 
    width: 560px; 
} 

.upsell .price-difference { 
    color: #0C82C4; 
    font-size: 15px; 
    font-weight: 700; 
    margin-left: 5px; 
    display: inline-block; 
} 

.stateroom .upsell .price-difference::after { 
    content: ""; 
    display: block; 
} 

.upsell .ccButtonNew { 
    position: absolute; 
    right: 10px; 
    top: 17px; 
} 

p要素は、その上にwhite-space: nowrapセットを持っていますが、私はそれをオフにすると、問題は消えません。

私はそれは、以下のリンクに関連することだと思うが、私の状況は同じではありません。その質問では、質問者はブロックレベルの要素divをpの内側に配置します。これはインライン要素のみを取ります。私はpの中にインライン要素spanを持っています。このはである必要があります。

:after pseudo-element working in FF, but not Safari or Chrome

Answer 1

.stateroom .upsell .price-difference:after { 
    content: ""; 
    display: block; 
    position: absolute; 
    width: 30px; 
    border-top: 1px solid #000; /* placeholder border */ 
} 

後のCSSルールに位置を追加してみてください。私は後の擬似がサファリの古いバージョンでは表示されないが、他のすべてのブラウザでも正しく動作するような状況がありました。私はCSSにポジションルールを追加することを修正しました。

・ホープ、このhepls。それは実際に擬似要素を選択する適切な方法で、CSSセレクタ内の余分な結腸なかった