Предложите, пожалуйста, идею, как можно сделать палочки?

Question

[Артур Грызлов]

Как должно быть:
Как получается у меня:


Есть ли способ как можно эти серые палочки сделать как-то по-умному? Я делаю с помощью after, но когда выравниваю одна палочка выше, вторая ниже :after {
content: '';
width: 65px;
height: 5px;
background-color: #777777;
}

Answer 1

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

Фон однородный.
По-моему, намного проще сделать большой див с большой полосой.
А уже под иконки положить фон того же цвета.
https://jsfiddle.net/9Lt88kdx/

Comments

[Артур Грызлов]

спасибо, круто)

Answer 2

[Pretor DH]

Делай две сначала и после элемента

.item:before,
.item:after {
content: '';
width: 33px;
height: 5px;
background-color: #777777;
}

Нарисуй одну линию на всю ширину, а иконкам задай размер и фоновый цвет бекграунда.

.container { position: relative; }
.container:before, {
content: '';
position:absolute;
top: 20px;
width: 100%;
height: 5px;
background-color: #777777;
}
.item {
text-align: center;
}
.item i {
display:block;
width:30px;
height:30px;
line-height:30px;
background: #fff;
}

Comments

[Артур Грызлов]

спасибо)

Answer 3

[YemSalat]

display: inline-block;
vertical-align: middle;