4
<li><span class="days">24</span></li>

Как можно получить такой элемент как на картинке картинка с помощью css (белая полоска зачеркивания идет перед цифрой)?

P.S.: цифры при этом меняются динамически

1
  • @lexxl цифры черные, зачеркивание белое - я надеюсь вы обратили на это внимание
    – Вася
    23 дек 2015 в 10:33

2 ответа 2

4

span {
    display: inline-block;
    background: #ffd800;
    font: 20px/1 Arial;
    width: 20px;
    border-radius: 5px;
}

span:before {
    content: '';
    display: block;
    position: relative;
    top: 11px;
    left: 0;
    width: 20px;
    height: 2px;
    background: #fff;
}
<span class="days">24</span>

4

span.days {
  font-family: Arial, sans-serif;
  font-size: 22px;
  font-weight: bold;
  line-height: 22px;
  display: inline-block;
  width: 36px;
  padding: 7px 0;
  background: #FCDB00;
  text-align: center;
  border-radius: 5px;
  position: relative;
}
span.days:before {
  position: absolute;
  width: 36px;
  height: 1px;
  content: '';
  top: 50%;
  left: 0;
  background: white;
}
<ul>
   <li><span class="days">24</span></li>
</ul>

Ваш ответ

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

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