Как вывести border за пределы родительского блока?

Question

Родительский блок шириной 1200px, следовательно, когда я задаю border дочернему блоку, он упирается в пределы родительского. Как это обойти?

Первое изображение - это макет, далее мой код и после идет то, что вышло у меня.

Answer 1

Как вариант могу предложить использовать псевдоэлемент ::after. Тут ссылка на документацию https://developer.mozilla.org/ru/docs/Web/CSS/::after

Ниже мой вариант применения.

.header {
    position: relative;
}
.container {
    width: 1200px;
    margin: 0 auto;
}
.nav::after {
    content: ' ';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -22px;
    width: 100%;
    height: 1px;
    background-color: #848484;
}
ul {
    display: flex;
    justify-content: space-around;
}
ul > li {
    text-decoration: none;
    list-style: none;
}
ul > li > a {
    text-decoration: none;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>Document</title>
    </head>
    <body>
        <header class="header">
            <div class="container">
                <div class="nav">
                    <ul>
                        <li><a href="#">home</a></li>
                        <li><a href="#">pages</a></li>
                        <li><a href="#">features</a></li>
                        <li><a href="#">extensions</a></li>
                        <li><a href="#">tutorials</a></li>
                        <li><a href="#">contact us</a></li>
                    </ul>
                </div>
            </div>
        </header>
    </body>
</html>

БЛОГ НА HUSL

Как вывести border за пределы родительского блока?

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