Как сверстать

[Okieazy 0]

Как правильно сверстать данный элемент?
Если делать через :before/:after, то с адаптивом возникают проблемы, так как чтобы заадаптивить, приходится ловить пиксели, на котором нужно менять позицию данного элемента. Я не думаю, что это правильное решение

.

[Switch74 344]

а что мешает поставить hr
какие проблемы с адаптивом при :before/:after?

[npofopr 400]

position: absolute;
left: 50%;
margin-right: -50%;
transform: translateX(-50%);

Решит ваши проблемы

[Okieazy 0]

12 minutes ago, Switch74 said:

а что мешает поставить hr
какие проблемы с адаптивом при 😛efore/:after?

Когда экран становится уже, текст начинает "перескакивать" на следующую строку, на том самое место, где находится линия.

[Switch74 344]

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

[Okieazy 0]

15 minutes ago, Switch74 said:

а что мешает поставить hr
какие проблемы с адаптивом при 😛efore/:after?

Я сделал с помощью hr.
Спасибо за совет.

Just now, Switch74 said:

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

Я не знаю.
Она находится в абсолютном положении, не двигается с места.
 

  &__title
    position: relative
    margin-bottom: 50px
    font-family: Playfairbold, arial, sans-serif
    font-size: 2.2em
    color: #fff
    text-transform: capitalize

    &:after
      content: ''
      position: absolute
      top: 75px
      left: 50%
      display: block
      width: 50px
      height: 1px
      background-color: $blue
      transform: translateX(-50%)

 

[Switch74 344]

https://jsfiddle.net/6jL30trm/

[Okieazy 0]

2 minutes ago, Switch74 said:

https://jsfiddle.net/6jL30trm/

Спасибо.
Какое из этих двух решения является, так скажем, наиболее правильным? (hr и :after)
Или просто как больше нравится?

[Switch74 344]

здесь как больше нравится, если при определенных условиях линия должна исчезать, то лучше через after
если нет, то можно и hr