web-dev-qa-db-fra.com

Le texte à l'intérieur: avant le pseudo élément?

J'ai un code comme ça:

span {
  border-radius: 50%;
  background-color: #d8d9dd;
  border: 6px solid #262c40;
  width: 25px;
  height: 25px;
  margin: 30px 0 0 40px;
  display: block;
}
span:before {
  content: attr(data-value);
  position: relative;
  white-space: pre;
  display: inline;
  top: -27px;
  left: -29px;
  width: 200px;
  text-align: center;
}
<span data-value="November 2016"></span>
<span data-value="May 2016"></span>

Comment puis-je centrer le texte à l'intérieur: avant qu'un pseudo-élément soit au milieu de la plage? C'est possible?

csscenteringpseudo-element
7
jcubic

La meilleure chose à faire serait de position le pseudo-élément before absolument par rapport à la variable span utilisant la technique de centrage populaire:

top: 0;
left: 50%;
transform: translate(-50%, -25px);

Notez que -25px doit décaler le texte au-dessus des cercles (qui a une hauteur de 25px) - voir la démo ci-dessous:

span {
  border-radius: 50%;
  background-color: #d8d9dd;
  border: 6px solid #262c40;
  width: 25px;
  height: 25px;
  margin: 30px 0 0 40px;
  display: block;
  position:relative;
}
span:before {
  content: attr(data-value);
  position: absolute;
  white-space: pre;
  display: inline;
  top: 0;
  left: 50%;
  transform: translate(-50%, -25px);
}
<span data-value="November 2016"></span>
<span data-value="May 2016"></span>

8
kukkuz

De MDN :

[le pseudo-élément :before] est intégré par défaut

Attribuer un widthaux éléments inline ne fait rien, vous devez donc le nommer comme suit: display: block (ou inline-block si cela convient mieux). Il s'avère également que vous devez ajuster la valeur leftà environ -88px pour que le texte soit centré sur le cercle.

span {
  border-radius: 50%;
  background-color: #d8d9dd;
  border: 6px solid #262c40;
  width: 25px;
  height: 25px;
  margin: 30px 0 0 40px;
  display: block;
}
span:before {
  content: attr(data-value);
  position: relative;
  white-space: pre;
  display: inline;
  top: -27px;
  left: -88px;
  width: 200px;
  text-align: center;
  display: block;
}
<span data-value="November 2016"></span>
<span data-value="May 2016"></span>

3
lonesomeday

Je déconseille d'utiliser des traductions négatives. Si vous ne le faites pas assez soigneusement, il risque de se retrouver en dehors de la fenêtre d'affichage.

De plus, vous ne devriez pas insérer de contenu avec des pseudo-éléments. Les pseudo-éléments ne doivent être utilisés qu'à des fins de style. Comme ça:

body {
  display: inline-block;
}
span {
  display: block;
  text-align: center;
}
span:after {
  content: '';
  border-radius: 50%;
  background-color: #d8d9dd;
  border: 6px solid #262c40;
  width: 25px;
  height: 25px;
  margin: 10px auto 30px;
  display: block;
}
<span>November 2016</span>
<span>May 2016</span>

Le texte à l'intérieur de la plage est centré en raison de text-align: center.

Le cercle de pseudo-éléments est centré en raison de margin-left: auto et margin-right: auto.

1
Oriol

J'ai été battu à cela, mais voici ma solution:

span {
   border-radius: 50%;
   background-color: #d8d9dd;
   border: 6px solid #262c40;
   width: 25px;
   height: 25px;
   margin: 30px 0 0 40px;
   display: block;
}
span:before {
   content: attr(data-value);
   position: relative;
   white-space: pre;
   display: inline-block;
   top: -27px;
   left: -50px;
   width: 125px;
   text-align: center;
}

Les modifications consistent à utiliser l'affichage inline-block sur le style :before et à ajuster les variables left et width du texte. 

0
Chris Peacock

Ajoutez display:inline-block; et ajoutez margin-left:-87px. où 87px dérivé de 

100px (50% de la largeur totale 200px) -13px (50% de la largeur de la travée 25px)

span {
  border-radius: 50%;
  background-color: #d8d9dd;
  border: 6px solid #262c40;
  width: 25px;
  height: 25px;
  margin: 30px 0 0 40px;
  display: block;
}
span:before {
  content: attr(data-value);
  position: relative;
  white-space: pre;
  display: inline-block;
  top: -27px;/*
  left: -29px;*/  
  margin-left: -87px;
  width: 200px;
  text-align: center;
}
<span data-value="November 2016"></span>
<span data-value="May 2016"></span>

0
jafarbtech