: 사파리에서 가상 엘레멘트가 작동하지 않는 경우

Question

동적 텍스트가있는 스타일이 지정된 문장이 있습니다. 때로는 텍스트가 너무 길어서 상자 외부의 끝에 앵커를 푸시합니다. span.price-difference 다음에 텍스트를 감싸고 싶지만, 앵커 버튼은 p의 오른쪽에 위치해야합니다.

.price-difference에 :after 의사 요소를 추가했습니다. 나는 그것을 content: ''과 display: block으로 설정했습니다. FF, Chrome, IE (IE8은 지원해야 함)에서 작동하지만 Safari는 작동하지 않습니다.

이 쉬운 대답은 또 다른 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을 넣습니다. 인라인 요소 인 span은 p 안에 있습니다. 이 은이어야합니다. 애프터의 CSS 규칙에 위치를 추가

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

시도. 나는 after pseudo가 이전 버전의 사파리에서는 표시되지 않지만 다른 모든 브라우저에서 제대로 작동하는 유사한 상황을 경험했습니다. 나는 css에 위치 규칙을 추가하는 것을 수정했다.

희망 사항입니다.