Комментарий #4340405

HN71
не удержался
spoiler
.p-profiles .b-badge:after {
   position: absolute;
   bottom: 11px;
   right: 5px;
   font-family: 'comic sans ms';
   font-weight: bold;
   color: white;
   text-shadow: 0px 0px 3px black, -1px -1px 2px black, 1px 1px 1px black;
}
.p-profiles .b-badge {
   min-height: 23px;
}
.b-badge[data-progress='100']:after { content: '100%'; }
.b-badge[data-progress='99']:after { content: '99%'; }
.b-badge[data-progress='98']:after { content: '98%'; }
.b-badge[data-progress='97']:after { content: '97%'; }
.b-badge[data-progress='96']:after { content: '96%'; }
.b-badge[data-progress='95']:after { content: '95%'; }
.b-badge[data-progress='94']:after { content: '94%'; }
.b-badge[data-progress='93']:after { content: '93%'; }
.b-badge[data-progress='92']:after { content: '92%'; }
.b-badge[data-progress='91']:after { content: '91%'; }
.b-badge[data-progress='90']:after { content: '90%'; }
.b-badge[data-progress='89']:after { content: '89%'; }
.b-badge[data-progress='88']:after { content: '88%'; }
.b-badge[data-progress='87']:after { content: '87%'; }
.b-badge[data-progress='86']:after { content: '86%'; }
.b-badge[data-progress='85']:after { content: '85%'; }
.b-badge[data-progress='84']:after { content: '84%'; }
.b-badge[data-progress='83']:after { content: '83%'; }
.b-badge[data-progress='82']:after { content: '82%'; }
.b-badge[data-progress='81']:after { content: '81%'; }
.b-badge[data-progress='80']:after { content: '80%'; }
.b-badge[data-progress='79']:after { content: '79%'; }
.b-badge[data-progress='78']:after { content: '78%'; }
.b-badge[data-progress='77']:after { content: '77%'; }
.b-badge[data-progress='76']:after { content: '76%'; }
.b-badge[data-progress='75']:after { content: '75%'; }
.b-badge[data-progress='74']:after { content: '74%'; }
.b-badge[data-progress='73']:after { content: '73%'; }
.b-badge[data-progress='72']:after { content: '72%'; }
.b-badge[data-progress='71']:after { content: '71%'; }
.b-badge[data-progress='70']:after { content: '70%'; }
.b-badge[data-progress='69']:after { content: '69%'; }
.b-badge[data-progress='68']:after { content: '68%'; }
.b-badge[data-progress='67']:after { content: '67%'; }
.b-badge[data-progress='66']:after { content: '66%'; }
.b-badge[data-progress='65']:after { content: '65%'; }
.b-badge[data-progress='64']:after { content: '64%'; }
.b-badge[data-progress='63']:after { content: '63%'; }
.b-badge[data-progress='62']:after { content: '62%'; }
.b-badge[data-progress='61']:after { content: '61%'; }
.b-badge[data-progress='60']:after { content: '60%'; }
.b-badge[data-progress='59']:after { content: '59%'; }
.b-badge[data-progress='58']:after { content: '58%'; }
.b-badge[data-progress='57']:after { content: '57%'; }
.b-badge[data-progress='56']:after { content: '56%'; }
.b-badge[data-progress='55']:after { content: '55%'; }
.b-badge[data-progress='54']:after { content: '54%'; }
.b-badge[data-progress='53']:after { content: '53%'; }
.b-badge[data-progress='52']:after { content: '52%'; }
.b-badge[data-progress='51']:after { content: '51%'; }
.b-badge[data-progress='50']:after { content: '50%'; }
.b-badge[data-progress='49']:after { content: '49%'; }
.b-badge[data-progress='48']:after { content: '48%'; }
.b-badge[data-progress='47']:after { content: '47%'; }
.b-badge[data-progress='46']:after { content: '46%'; }
.b-badge[data-progress='45']:after { content: '45%'; }
.b-badge[data-progress='44']:after { content: '44%'; }
.b-badge[data-progress='43']:after { content: '43%'; }
.b-badge[data-progress='42']:after { content: '42%'; }
.b-badge[data-progress='41']:after { content: '41%'; }
.b-badge[data-progress='40']:after { content: '40%'; }
.b-badge[data-progress='39']:after { content: '39%'; }
.b-badge[data-progress='38']:after { content: '38%'; }
.b-badge[data-progress='37']:after { content: '37%'; }
.b-badge[data-progress='36']:after { content: '36%'; }
.b-badge[data-progress='35']:after { content: '35%'; }
.b-badge[data-progress='34']:after { content: '34%'; }
.b-badge[data-progress='33']:after { content: '33%'; }
.b-badge[data-progress='32']:after { content: '32%'; }
.b-badge[data-progress='31']:after { content: '31%'; }
.b-badge[data-progress='30']:after { content: '30%'; }
.b-badge[data-progress='29']:after { content: '29%'; }
.b-badge[data-progress='28']:after { content: '28%'; }
.b-badge[data-progress='27']:after { content: '27%'; }
.b-badge[data-progress='26']:after { content: '26%'; }
.b-badge[data-progress='25']:after { content: '25%'; }
.b-badge[data-progress='24']:after { content: '24%'; }
.b-badge[data-progress='23']:after { content: '23%'; }
.b-badge[data-progress='22']:after { content: '22%'; }
.b-badge[data-progress='21']:after { content: '21%'; }
.b-badge[data-progress='20']:after { content: '20%'; }
.b-badge[data-progress='19']:after { content: '19%'; }
.b-badge[data-progress='18']:after { content: '18%'; }
.b-badge[data-progress='17']:after { content: '17%'; }
.b-badge[data-progress='16']:after { content: '16%'; }
.b-badge[data-progress='15']:after { content: '15%'; }
.b-badge[data-progress='14']:after { content: '14%'; }
.b-badge[data-progress='13']:after { content: '13%'; }
.b-badge[data-progress='12']:after { content: '12%'; }
.b-badge[data-progress='11']:after { content: '11%'; }
.b-badge[data-progress='10']:after { content: '10%'; }
.b-badge[data-progress='9']:after { content: '9%'; }
.b-badge[data-progress='8']:after { content: '8%'; }
.b-badge[data-progress='7']:after { content: '7%'; }
.b-badge[data-progress='6']:after { content: '6%'; }
.b-badge[data-progress='5']:after { content: '5%'; }
.b-badge[data-progress='4']:after { content: '4%'; }
.b-badge[data-progress='3']:after { content: '3%'; }
.b-badge[data-progress='2']:after { content: '2%'; }
.b-badge[data-progress='1']:after { content: '1%'; }
.b-badge[data-progress='0']:after { content: '0%'; }
spoiler
Ответы
Котанавари
Котанавари#
@HN71, спасибо. А можно код на сортировку по проценту?
ze ro
ze ro#
@HN71, вместо ручного сбора всех процентов
.b-badge:after {
  content: attr(data-progress) '%';
}
flyoffly
flyoffly#
@HN71, Спасибо, теперь получше выглядит, да и более наглядно
назад
Твой комментарий
Вернуться к редактированию
Предпросмотр
Скрыть