Рекомендованные сообщения

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

.Screenshot_7.thumb.png.b758b3db583f943c05751123fa93c217.png

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
position: absolute;
left: 50%;
margin-right: -50%;
transform: translateX(-50%);

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
12 minutes ago, Switch74 said:

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
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%)

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
2 minutes ago, Switch74 said:

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

  • Сейчас на странице   0 пользователей

    Нет пользователей, просматривающих эту страницу.