: après pseudo élément ne fonctionne pas dans Safari

J'ai un style de phrase, de texte dynamique. Parfois, le texte est trop long, et pousse le point d'ancrage à la fin en dehors de sa boîte. Je veux que le texte en écharpe après la span.price-differencemais le bouton d'ancrage pour être positionné contre le côté droit de la p.

J'ai ajouté un :after pseudo élément de .price-difference. Je l'ai mis content: '' et display: block. Fonctionne dans FF, Chrome, IE (y compris IE8, que j'ai à l'appui), mais pas Safari.

Il n'y est une réponse facile, encadrant le texte suivant .price-difference avec un autre spanet blockmais en changeant le code HTML est une corvée, nécessitant un backend developer pour apporter des modifications à un fichier JSP, et je suis l'espoir de l'éviter. Vous cherchez un CSS seule solution, si elle existe.

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

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

La p élément a white-space: nowrap fixés sur elle, mais quand je le désactiver, le problème ne disparaît pas.

Je pense que c'est lié au lien suivant, mais ma situation n'est pas la même. Dans cette question, le demandeur a mis un bloc de niveau élément div à l'intérieur d'un pqui ne prend que des éléments inline. J'ai un élément inline, spanà l'intérieur de la p. Cette devrait travail.

:après le pseudo-élément de travail dans les FF, mais pas Safari ou Chrome

source d'informationauteur absynthe minded web smith

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

    essayez d'ajouter une position à l'après de règles css. j'ai eu une situation similaire dans laquelle le après le pseudo ne s'affichent pas dans les anciennes versions de safari, mais il a travaillé correctement dans tous les autres navigateurs. Je fixe l'ajout d'une position de la règle de la css.

    Espère que ce hepls.