Как сделать горизонтальную черту на всю ширину?

Question

[Genri_Rus]

Вот пример: https://codepen.io/Genri_Rus/pen/NWWJgeo

Никак не могу понять, как под заголовком увеличить на всю ширину черную линию ?

Comments

[Genri_Rus]

Xdevelx, container нужен чтобы весь контент всегда был по середине как у .left-block, так и внутри у .right-block

Без flex в данном случае никак не решить ?

[Genri_Rus]

Xdevelx, вот я сделал, но ничего не поменялось: https://codepen.io/Genri_Rus/pen/NWWJgeo

[Genri_Rus]

Xdevelx, я так понял псевдоэлементы тут только помогут ?

Answer 1

[Равиль]

-webkit-box-reflect: right;
В класс title.

Заработает)

Comments

[Genri_Rus]

И куда его нужно добавить ?

[Равиль]

Genri_Rus, в блок h1 с классом title

[Равиль]

Genri_Rus, точнее, в css класс title

[Genri_Rus]

Равиль Туйчин, сделал: https://codepen.io/Genri_Rus/pen/NWWJgeo

P.S. Ничего не поменялось

[Равиль]

Genri_Rus, поправка: -webkit-box-reflect: right;

[Genri_Rus]

Равиль Туйчин, я сделал, ничего не поменялось: https://codepen.io/Genri_Rus/pen/NWWJgeo

[Равиль]

Genri_Rus, перед словом "webkit" пропустил дефис

[Равиль]

@Genri_Rus

[Genri_Rus]

Равиль Туйчин, спасибо )

А других вариантов нету ?
И что насчет поддержки на internet explorer ?

[Равиль]

Genri_Rus, других вариантов к сожалению не нашёл)
IE не поддерживает

[Genri_Rus]

Равиль Туйчин, как вариант тогда сделать с помощью псевдоэлементов ?

[Равиль]

Genri_Rus, думаю, не выйдет.
Я бы использовал flexbox или grid)

[Genri_Rus]

Равиль Туйчин, и как вы бы сделали на flexbox ?

[Равиль]

Genri_Rus, я бы заново переверстал весь макет, применяя flexbox или grid

[Genri_Rus]

Равиль Туйчин, а пример на flexbox не покажите ?

[Равиль]

Genri_Rus, покажу, только позже)

[Genri_Rus]

Равиль Туйчин, спасибо большое !

[Равиль]

Genri_Rus, в воскресенье вечером, сверстаю ваш пример на флексах. Затем, отправлю сюда.

[Genri_Rus]

Равиль Туйчин, спасибо, буду ждать

[Равиль]

Genri_Rus, как и обещал:
https://codepen.io/Tuychin/pen/MWYgBWe
Извините за задержку)

P.S. Поддержка flexbox начинается с IE 10
Макет не адаптивный.

[Genri_Rus]

Равиль Туйчин, спасибо огромное )

А класс с .container без flex можно использовать ?

[Равиль]

Genri_Rus, не желательно, заголовок поедет)

Answer 2

[Sagrana]

Как вариант:
для .wrapper задать overflow: hidden;
для .title — position: relative;
и

.title:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100vw;
  border-bottom: 5px solid #000;
}

Comments

[Genri_Rus]

Точно также сделал ;)

Только вместо 100vw - 100% поставил, чтобы на ie поддержка лучше была

[Sagrana]

вроде ie поддерживает vw
https://caniuse.com/

[Genri_Rus]

Светлана, до 8 нет

[Sagrana]

Genri_Rus, так далеко на поддержку я не заглядывала)

[Genri_Rus]

Светлана, я вообще думаю, что это можно на flexbox без костылей сделать, но не знаю даже как (

Answer 3

[DanielMcRon]

width: 100% ;

Comments

[Genri_Rus]

какому блоку задать ?

[DanielMcRon]

Линии задать, а блок уже ограничит выход её за грани

[Genri_Rus]

DanielMcRon, вот я задал, но ничего не поменялось: https://codepen.io/Genri_Rus/pen/NWWJgeo

[Genri_Rus]

DanielMcRon, что неправильно я сделал ?

[Froggyweb]

Genri_Rus, у тебя очень много ограничений пл ширине у вредительских блоков

[Genri_Rus]

Froggyweb, ну и как решить данную проблему ?

[Froggyweb]

убрать убрать ограничение ширины у родителей :)

[Genri_Rus]

Froggyweb, а если контент должен быть всегда по середине ?

[Froggyweb]

right-block
/* width: 950px; */ - убрать
/* height: 600px; */- убрать
flex: 1 1; - добавить

[Genri_Rus]

Froggyweb, а без flex никак не получится ?

[Genri_Rus]

Froggyweb, вот я сделал, но ничего не поменялось: https://codepen.io/Genri_Rus/pen/NWWJgeo