Как стилизовать элемент счетчика?

#html #css #счетчики #изображения

24


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

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

Ответы

Ответ 1

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;
}
24


Ответ 2

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;
}

   
24