Border или text-decoration?

Question

[Mary Солнечная]

Здравствуйте! Подскажите, пожалуйста, как оформить такую менюшку? Вооруженным глазом видно. что между эл-тами списка есть две линии - темная и серая:
Из макета:


Моё:

идеально подошел бы border, если бы только это подчеркивание было не такое длинное. Начинаю сомневаться.
Благодарю за помощь. Всем тепла!

Answer 1

[Никита Мусихин]

это бордер тега li, просто,как мне кажется там общий padding задан по бокам для всего меню в целом

Answer 2

[Дмитрий Новиков]

padding у родителя меню, а там как угодно - хоть border, хоть background... но только не text-decoration. он не для этого предназначен.

Answer 3

[Виталий Инчин ☢]

Делаем ссылке внутри li display: block;, немного padding-bottom и бордер.
При этом нужно добавить padding по бокам самому элементу списка.

--» ☼ Пример ☼ «--

Answer 4

[Ivanq]

https://jsfiddle.net/Ivanq/pp754pfw/4/

Comments

[Ivanq]

27cm: я - нет. исправил

[Ivanq]

27cm: мне кое-кто подсказал

Answer 5

[Сергей Горячев]

Думаю суть уловите https://jsfiddle.net/webirus/61ot84tf/10/

UPD: Пофиксил ссылку на Fidl, что-то глюкануло.

UPD2: Добавил ссылки и чтобы нижний паддинг был, после последнего элемента.

Comments

[Котик Антон]

Линии должны быть только между пунктами.

[Сергей Горячев]

27cm: https://jsfiddle.net/webirus/61ot84tf/10/ ммм?

[Сергей Горячев]

27cm: просто не совсем уловил, где у вас пункты) А где что-то другое) По-моему, просто забыли в макете линии дорисовать между вторым и третьим)))

Answer 6

[Котик Антон]

https://jsfiddle.net/h99hq106/

ul {
    padding: 1em;
}

ul li {
    border-bottom: 1px solid #0F0F0F;
}

ul li:last-child {
    border-bottom: none;
}

ul li + li {
    border-top: 1px solid #262626;
}

Comments

[Ivanq]

И вы считаете это нормальным решением? Я вас передразниваю )

ul li:nth-child(2) + li
вместо
ul li:nth-child(3),
не? )))

[Ivanq]

опоздали ))) я уже свой вариант в чате передал