: nachdem Pseudo-Element nicht in Safari funktioniert

Question

Ich habe einen formatierten Satz mit dynamischem Text. Manchmal ist der Text zu lang und schiebt den Anker am Ende außerhalb seiner Box. Ich möchte, dass der Text nach der span.price-difference, aber der Anker-Taste gegen die rechte Seite der p positioniert werden.

Ich fügte ein :after Pseudoelement zu .price-difference hinzu. Ich habe es gesetzt content: '' und display: block. Funktioniert in FF, Chrome, IE (einschließlich IE8, die ich unterstützen muss), aber nicht Safari.

Es gibt eine einfache Antwort, den Textumbruch folgenden .price-difference mit einer anderen span, und setzen Sie sich auf block, aber die HTML-Wechsel ist ein Streit, einen Back-End-Entwickler erfordert Änderungen an eine JSP-Datei zu machen, und ich hoffe, um das zu vermeiden. Suchen Sie nach einer CSS-Lösung, falls diese existiert.

<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> 

Die 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; 
} 

Das p Element hat white-space: nowrap Satz auf, aber wenn ich es ausschalten, ist das Problem weg geht nicht.

Ich denke, es ist mit dem folgenden Link verwandt, aber meine Situation ist nicht das Gleiche. In dieser Frage hat der Fragesteller ein Block-Level-Element div in ein gesetzt, das nur Inline-Elemente akzeptiert. Ich habe ein Inline-Element, span, innerhalb der . Diese sollte funktionieren.

: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 */ 
} 

versuchen, eine Position zu dem CSS-Regeln nach dem Hinzufügen. Ich hatte eine ähnliche Situation, in der das After-Pseudo in alten Safari-Versionen nicht angezeigt wurde, aber in allen anderen Browsern einwandfrei funktionierte. Ich habe das Hinzufügen einer Positionsregel zum CSS behoben.

Hoffe, das hepls.