HTML, CSS. Как я могу сделать адаптивную ширину для ::before ::after

Question

У меня два заголовка, около которых должны стоять линни. Один заголовок широкий, другой нет, поэтому линни у этих заголовков находятся на разном расстоянии от края блока. Как я могу сделать так, чтобы ширина линий задавалась в зависимости от ширины текста?

И код

.caption::before, .caption::after{
    background-color: #ad4b57;
    content: "";
    height: 1px;
    width: 35.5%;
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.caption::before{
    margin-right: 1em;
}

.caption::after{
    margin-left: 1em;
}

Answer 1

Наверное вы это имели ввиду. Я просто задал блоку border и натянул на него Заголовок.
Также сделал overflow: hidden во избежание переполнения, так как если этого не сделать и заголовок перейдёт на вторую строку, высота изменится и уже будет не красиво. Надеюсь такой подход вам подойдёт)

.block {
  width: 100%;
  border-top: 1px solid black;
  margin-bottom: 30px;
  margin-top: 30px;
  display: flex;
  justify-content: center;
}
h2 {
  text-transform: uppercase;
  display: inline-block;
  text-align: center;
  background-color: white;
  padding: 0 20px;
  margin-top: -13px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

<div class="block">
  <h2>
    Калькулятор
  </h2>
</div>
<div class="block">
  <h2>
    Наши клиенты Наши клиенты Наши клиенты Наши клиенты Наши клиенты
  </h2>
</div>
<div class="block">
  <h2>
    Отзывы
  </h2>
</div>

Answer 2

Если это тестовое задание, то представленый выше вариант, явно не то что у вас спрашиваеться. Там же написано, что надо что б у второго элемента эти полоски были короче чем у первого. Задача не такая тревиальная как может показаться с первого раза. Если я условия понял правильно, то вот решение.

body {
  margin: 0;
  font-family: Roboto, sans-serif;
}

section {
  position: relative;
  overflow: hidden;
  width: 100%;
  text-align: center;
  margin: 20px auto;
}

.title {
  display: inline;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  z-index: 2;
  background-color: #fff;
  padding: 0 20px;
}

.dec_line:before,
.dec_line:after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  height: 1px;
  width: 50vw;
  background-color: #000;
  z-index: -1;
}

.dec_line:before {
  left: -50vw;
}

.dec_line:after {
  right: -50vw;
}

.dec_line_short:before,
.dec_line_short:after {
  width: 50vw;
}

.dec_line_short:before {
  left: calc(-40vw);
}

.dec_line_short:after {
  right: -40vw;
}

<section>
  <h2 class="title dec_line">Our Works</h2>
</section>

<section>
  <h2 class="title dec_line dec_line_short">Reviews</h2>
</section>

Для медиа виражений, по типу мобильного отображения, там надо подбирать значения параметра ширины.

Answer 3

Как простое альтернативное решение...

fieldset {
  padding: 0;
  margin: 0 1em;
  border: none;
  border-top: 1px solid #888;
}
legend {
  padding: 0 1em;
}

<fieldset>
<legend align="center"><h2>Наши работы</h2></legend>
</fieldset>
<fieldset>
<legend align="center"><h2>Отзывы</h2></legend>
</fieldset>

БЛОГ НА HUSL

HTML, CSS. Как я могу сделать адаптивную ширину для ::before ::after

Ответы (3 шт):