Горизонтальная черта-разделитель до и после меню?

Question

[Ярослава]

Добрый день.

Подскажите, как лучше реализовать следующую вещь:
Full-width шаблон делаю, внутри него есть она контента 1024px. Внутри этой зоны контента есть меню горизонтальное.
Задача: до и после меню сделать горизонтальную линию-разделитель. Важно то, что эта линия должна также идти и на full-width части.
Рисунок:

Answer 1

[trushka]

Вот так можно сделать. Но чтоб оно выходило за границы видимого блока и растягивалось на всю ширину, можно конечно всякие пляски с бубном отрицательными маргинами и calc() устроить, а можно апрсто перед блоком с контентом ставить, а не внутрь

Comments

[Ярослава]

Огромное спасибо

Answer 2

[lionkka]

Сделать псевдоклассы before и after

content: '';
    display: block;
    height: 1px;
    position: relative;
    width: 70%;
    max-width: 300px;
    left: 0;
    top: 20px;
    background: #d7d7d7;

как пример. Скопировала из своего проекта

Comments

[Ярослава]

Спасибо, думала про псевдоклассы, попробую

Answer 3

[Mauster]

К примеру у Вас есть меню HTML

<nav class="main-menu">
    <ul>
           <li>
                Пункт меню
           </li>
     </ul>
</nav>

Задаём в CSS свойство

.main-menu{
position:relative;
background:#FFF;
display:table;
margin:auto;
}
/* Теперь нам нужно сделать полоску по сторонам */
.main-menu:before{
content:''';
position:absolute;
left:0;
top:0;
width:100%
height:1px;
background:#000;
}

Answer 4

[Михаил Еникеев]

Как сверстать такой элемент?