Как центрировать текст внутри: перед псевдо-элементом?

у меня есть такой код:

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>

Как я могу центрировать текст внутри: перед псевдо-элементом, чтобы быть в середине промежутка? Возможно ли это?

7
centering css pseudo-element

5 ответов

лучше всего было бы позиция на before псевдо элемент абсолютно в отношении span используя популярный центрируя метод:

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

обратите внимание, что-25px смещает текст над кругами (который имеет высоту 25px) - см. демонстрацию ниже:

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

С MDN:

[в :before псевдо-элемент] встроен по умолчанию

предоставление встроенных элементов a width ничего не делает, поэтому вам нужно стиль его как display: block (или inline-block если это более уместно). Также оказывается, что вам нужно настроить left стоимостью примерно -88px чтобы текст был центрирован по кругу.

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

я рекомендую не использовать отрицательные переводы. Это может оказаться за пределами окна просмотра, если вы не сделаете это достаточно осторожно.

кроме того, вы не должны вставлять содержимое с псевдоэлементами. Псевдо-элементы должны использоваться только для стилизации. Вот так:

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>

текст внутри промежутка центрируется из-за text-align: center.

круг псевдо-элемента центрирован из-за margin-left: auto и margin-right: auto.

1

Я был избит до этого, но вот мое решение:

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

изменения должны использовать inline-block дисплей :before стиль и настроить left и width текста.

0

добавить display:inline-block; и добавить margin-left:-87px. где 87px, полученные от

100px(50% из всей ширины 200px)-13px (50% из ширины 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