Как реализовать это адаптивно?

Question

[Георгий Бухаров]

В футере есть логотип, а по обеим сторонам от него идут линии, выходящие за пределы контейнера, то есть растягивающиеся на всю ширину страницы.

Пробовал before/after, z-index-ом опрерировать, отдельный блок создавать – никак не выходит.

Comments

[Lynn «Кофеман»]

Это точно не направляющие дизайнерской сетки?

Answer 1

[Георгий Бухаров]

Нашёл решение. Может, кому будет нужно.
Stylus:

&__logo
		display flex
		justify-content center //выравниваем по горизонтали
		align-items center //выравниваем по вертикали
		&:before, &:after
			content ''
			height 1px
			width 100%
			background-color rgba(#33333d 45%)
			border-width 0 31px // задаем бордер по краям
			border solid #080810 // задаем ему цвет фона, это создаст отступы от блока
		// смещаем линии к краям страницы
		&:before
			margin-left -100% 
		&:after
			margin-right -100%

Comments

[sazhyk]

не очень понял, как это работает? переменные css? иль это с использованием препроцессоров? Можно чутка подробнее

[Adikjoro]

sazhyk: написано: "Stylus". Это препроцессор.

[sazhyk]

Adikjoro: а-да, извините, не увидел

Answer 2

[Юнус Газиев]

Вот так

<div class="logo-footer">
    <div class="logo-wrapper">
        <a class="logo-link" href="#">
            <img class="logo-image" src="image.png">
        </a>
    </div>
</div>

<style type="text/css">
    .logo-footer {
        overflow: hidden;
        text-align: center;
    }
    .logo-wrapper {
        position: relative;
        display: inline-block;
        vertical-align: top;
    }
    .logo-wrapper:before,
    .logo-wrapper:after {
        content: '';
        position: absolute;
        width: 5000px;
        height: 1px;
        background-color: #ccc;
    }
    .logo-wrapper:before {
        right: 110%;
    }
    .logo-wrapper:after {
        left: 110%;
    }
</style>