0
votes

Avant et après le sélecteur pseudo ne fonctionnant pas en chrome

ive a disparu et créé une HR construite personnalisée, mais pour une raison quelconque, le contenu de l'élément avant est derrière les lignes doubles en chrome et en bord. Travailler parfaitement dans Firefox ... Voici mon code ...

.dividerHR {
  float:left;
  padding:0;
  border:none;
  border-top:double medium #999;
  color:#999;
  text-align:center;
  width:90%;
  margin:0 5%;
  text-shadow: 0 0 2px rgba(0,0,0,.8)
 }
.dividerHR::before {
  content:'< Coding Poetry />';
  background:#181818;
  display:inline-block;
  position:relative;
  top:-12px;
  font-size:12px;
  padding:0 0.25em; 
  text-shadow:0 0 2px rgba(0,0,0,.8)
 }

css google-chrome

3 commentaires

Travailler bien sur chrome et bord

Vraiment @vikas. Que voyez-vous que le contenu montre derrière les règles de 2 heures en Chrome moi-même. Regardez les scénarios ci-dessus.

z-index: 1 sur l'élément avant?

3 Réponses :

1
votes

Ajouter Position: relative code> en classe. divisionhr code> et modifier Position: relative code> à absolu code> sur sur .Dividerhr :: avant code>

voici la solution mise à jour: p>

p>



<div class="dividerHR"></div>

0 commentaires

0
votes

Vous pouvez essayer de changer la position de l'élément avant absolu, puis de positionner avec droit et haut: xxx

}

0 commentaires

0
votes

Vous pouvez résoudre ce problème en position positionnant.

.dividerHR {
    position: relative;
    float: left;
    padding:0;
    border:none;
    border-top:double medium #999;
    color:#999;
    text-align:center;
    width:90%;
    margin:0 5%;
    text-shadow: 0 0 2px rgba(0,0,0,.8)
}
.dividerHR::before {
    content:'< Coding Poetry />';
    background:#181818;
    display:inline-block;
    position:absolute;
    top:-12px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    font-size:12px;
    padding:0 0.25em; 
    text-shadow:0 0 2px rgba(0,0,0,.8)
}

0 commentaires