0

Ребят нужна помощь, как сделать так что бы рамки шли по центру между слов как показано на скриншоте:

Вот так

2 ответа 2

1

Это просто border вот пример

li {
    border-right: 1px solid #000;
    display: inline-block;
    float: left;
    padding: 0 10px;
}
li:last-child {
    border: none;
}
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>

1

ul{
  background:#4d99e2;
  padding:5px 0;
  font-size:0;
}
ul li{
  list-style-type:none;
  display:inline-block;
}
ul li a{
  font-size:14px;
  color:#fff;
  padding:0 10px;
  display:inline-block;
  position:relative;
}
ul li a::after{
  content:"";
  width:1px;
  height:100%;
  background:#fff;
  position:absolute;
  top:0;
  right:0;
}
ul li:last-child a::after{
  background:0 none;
}
<ul>
  <li>
    <a href="#!">Home</a>
  </li>
  <li>
    <a href="#!">Checkout</a>
  </li>
  <li>
    <a href="#!">Log In</a>
  </li>
</ul>

Как то так))

2
  • можно подсократить - ul li:not(:last-child) a:after 26 сен 2017 в 7:11
  • В принципе да, согласен
    – DaemonHK
    26 сен 2017 в 7:12

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.