Как центрировать after и before?

Question

[Ivan Ivanovich]

Здравствуйте. Есть код - https://jsfiddle.net/rpjhL7vo/

Как сделать так, чтобы полосы были в длину равно столько же, сколько и у текста и располагались ровно по середине относительно текста.

Answer 1

[Александр AS]

Задайте для after и before,

width: 100%
left: 50%
transform: translateX(-50%)

Comments

[Ivan Ivanovich]

Александр AS Но тогда ширина полос будет во весь экран, а мне нужно, чтобы ширина была такая-же, как и у текста друг

[Ivan Ivanovich]

Александр AS Вот как получается - https://jsfiddle.net/wh74te0r/

[Александр AS]

Ivan Ivanovich, если на h2 будет стоять position: relative, то полосы не будут на весь экран, а будут только на весь текст который содержит h2

[Ivan Ivanovich]

Александр AS, У h2 есть свойство position relative

[Александр AS]

Ivan Ivanovich, попробуйте убрать в h2 display: block

[Ivan Ivanovich]

Александр AS, Нет эффекта

Answer 2

[houd1ini]

Как по мне, лучшим решением будет:

h2 {
  display: inline-block;
  min-width: 200px;
}

h2:after, h2:before {
  left: 0;
  right: 0;
  width: auto;
}

И дать родителю (в вашем случае body), выравнивание по центру:

body {
  text-alight: center;
}

Comments

[Ivan Ivanovich]

houd1ini Вот так??? - https://jsfiddle.net/mgn1a3y8/

[houd1ini]

Это тот код, который надо дописать к вашему фидлу, если полный код, то примерно так

body {
  text-align: center;
}

h2 {
  text-transform: uppercase;
  font-size: 35px;
  padding: 20px 0;
  position: relative;
  display: inline-block;
  min-width: 200px;
}

h2::after {
  content: "";
  position: absolute;
  display: block;
  height: 3px;
  background-color: #000;
  bottom: 0;
  left: 0;
  right: 0;
}
h2::before{
  content: "";
  position: absolute;
  display: block;
  height: 3px;
  background-color: #000;
  top: 0;
  left: 0;
  right: 0;
}

Паддинги можете подобрать сами, как вам необходимо. В случае который я написал, не важно скок у вас будет контента after и before будут четко зависить от контента. Если нужно что бы при увеличении текста, линии были немного дальше чем текст, вам достаточно вместо left 0; и right: 0; написать left: -20px; right: -20px; (тут значение на сколько вам нужно вытянуть линии относительно текста)