Пунктирная линия под надписью кнопки?

Question

[Артем]

Здравствуйте, с версткой дружу, но столкнулся вот с какой интересной штукой при верстке элементарной кнопки, бьюсь уже час, разными способами, пробовал "border-bottom" "background: изображением" но не могу довести до вида указанном на дизайне.



на рисунке видно, что подчеркивание одним размером с ссылкой, используются отступы которых невозможно добиться,
"border-bottom" как быть ?

Answer 1

[vdem]

Вместо input использовать button (т.к. по стандарту HTML button может содержать вложенные теги), а в нем создавать span, в котором и выводить надпись на кнопке и задавать стиль нижней рамки.

Comments

[Артем]

а если это Ul > LI ?

[vdem]

Артем Супрунчук: Тогда это не кнопка, очевидно же. А простое решение то же - span внутри li.

[vdem]

Кот Кошмарик: Пусть сами кодят, подсказки должно быть достаточно для тех, у кого есть мозги :)

[Артем]

vdem: я кодил и мозги на месте, перепробовал массу вариантов там кучу нюансов, попробуйте сами найти рабочий вариант, хотя бы для себя

[Артем]

Кот Кошмарик: там в другом беда выходит, при наведении на пункт ссылка не активная, я покажу свои примеры

[vdem]

Артем Супрунчук: Про ссылки не было ни слова, было про кнопки :) Точная формулировка вопроса == 50% готового правильного ответа.

[Артем]

vdem: моя ошибка, прошу прощения

[Артем]

пытался выкрутится таким путем, https://jsfiddle.net/hnhfcgaq/2/ но пунктир на длину кнопки, не по дизайну

[Артем]

Кот Кошмарик: согласен

[Артем]

Кот Кошмарик: дело в том что так пунктир идет на всю длину это не по дизайну, если делаю так https://jsfiddle.net/hnhfcgaq/4/ то про наведении на ссылку с боку он его не видит как активный, срабатывает при наведении на саму ссылку, попробуйте

[vdem]

.top-menu {
list-style-type: none;
margin: 0;
padding: 0;
display: block;
text-align: center;
margin: 20px 0;
}

.top-menu li {
display: inline-block;
margin: 0 5px;
}

.top-menu li a {
color: #494949;
display: block;
font-size: 14px;
padding: 10px;
text-decoration: none;
}

.top-menu li a span {
border: 0px dotted #494949;
border-bottom-width: 1px;
}

.top-menu li a:focus,
.top-menu li a:active,
.top-menu li a:hover {
background-color: #30A0FF;
}

.top-menu li a:focus span,
.top-menu li a:active span,
.top-menu li a:hover span {
color: #FFF;
border-color: #FFF;
}

[vdem]

И - добавить "span" в "a".

[Артем]

vdem: спасибо, очень интересное решение, не на что не повлияет ? не считается своего рода костылем ?

[Артем]

Кот Кошмарик: Как вариант, спасибо !

[vdem]

Артем Супрунчук: ИМХО вполне нормальное решение, без всяких костылей. И должно работать во всех браузерах, нет никаких хитрых трюков.

[vdem]

Артем Супрунчук: Можно еще добавить "outline-width: 0px" для "a", если появляется пунктир вокруг "a" при фокусе.

[Артем]

vdem: Спасибо, годится, выручили !

[vdem]

Кот Кошмарик: Артем Супрунчук
0 вклад
2 вопроса
0 ответов
0% решений

Answer 2

[zooks]

Вот пример с реального проекта:
codepen.io/zooks/pen/EKRygb