2

Есть заголовок, различного содержания, с декоративными черточками по бокам:

* {
  box-sizing: border-box;
}

.title {
  font-size: 2.5rem;
  line-height: 1.2;
  font-family: cursive;
  text-align: center;
}

.title span {
  padding-left: 10px;
  padding-right: 10px;
  display: inline-block;
  position: relative;
}

h2.title span {
  display: inline;
}

.title span:before, 
.title span:after {
    content: '';
    position: absolute;
    height: 2px;
    width: 42px;
    background: red;
    top: 50%;
    margin-top: 3px;
}

.title span:before {
    right: 100%;
}

.title span:after {
    left: 100%;
}
<h1 class="title">
  <span>Lorem ipsum.</span>
</h1>
  
<h2 class="title">
  <span>Lorem ipsum dolor.</span>
</h2>

Проблема возникает на мобильных разрешениях. Пробую и inline-block и inline.

введите сюда описание изображения

Вопрос: как максимально приблизить черточки к тексту (независимо от содержания и длины слов) на мобильных разрешения?

5
  • display: flex, grid ?
    – user355286
    18 дек 2019 в 18:14
  • Или есть причина почему они не используются?
    – user355286
    18 дек 2019 в 18:15
  • 1
    @Hamster Привет! Вдруг не видела, на всякий случай Новогодний конкурс 2020! По твоему пожеланию выбрал картинку с тёмным фоном, чтобы фейерверки хорошо смотрелись 24 дек 2019 в 20:18
  • @Alexandr_TT, спасибо!!! Не видела, времени и настроения совсем нет!))))
    – SVE
    25 дек 2019 в 12:36
  • @HamSter А создать себе настроение, вопреки всему? На всякий случай, вдруг до праздника не увидимся. Всего тебе самого хорошего, пусть сбудутся все твои, даже самые дерзкие мечты в Новом 2020 Году! 25 дек 2019 в 12:47

1 ответ 1

3

h1,
h2 {
  font-size: 2.5rem;
  line-height: 1.2;
  font-family: cursive;
  display: flex;
  align-items: center;
  justify-content: center;
}

span {
  width: 60%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
}

span::before,
span::after {
  content: '';
  height: 2px;
  min-width: 42px;
  background: red;
}
<h1>
  <span>Lorem ipsum.</span>
</h1>

<h2>
  <span>Lorem ipsum dolor.</span>
</h2>

2
  • Похоже идеальный вариант, спасибо!
    – SVE
    18 дек 2019 в 18:27
  • 1
    Можно и span убрать, потому что непонятно, для чего он там вообще jsfiddle.net/f928y6he
    – user355286
    18 дек 2019 в 18:32

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.