css counter - change content on hover CSS -

css counter - change content on hover CSS -

i want alter content of list on hover, i.e roman changed numeric 1, 2, 3

i tried li:hover li:hover:after both add together content existing content

class="snippet-code-css lang-css prettyprint-override">ul { min-height: 30px; width: 180px; margin-left:-30px; list-style-type: none; counter-reset: chrome-counter; } li:before { content: counter(chrome-counter, lower-roman); padding: 1px 2px; margin-right: 0.2em; font-weight: bold; } li { margin: 2px 0; padding: 1px 4px; font: normal bold 18px/32px ms-sans, geneva, sans-serif; display: inline-block; width: 40px; text-align: center; color: #fff; counter-increment: chrome-counter; } li:hover { padding: 4px 8px; color: #333; /*content : '..';*/ counter-reset : counter(chrome-counter, upper-roman); box-shadow: 0px 0px 4px #222; border-radius: 1.5em .5em / 2.5em 2em; } .cc1 { background-color: #ff6766; color: #fff; } class="snippet-code-html lang-html prettyprint-override"> <ul class="scheme"> <li class="cc1" ></li> <li class="cc1" ></li> <li class="cc1" ></li> </ul>

if you're working on :before pseudo-element, need apply states exact element... not main element, nor :after element, 1 needs change, li:before in case:

class="snippet-code-css lang-css prettyprint-override">ul { min-height: 30px; width: 180px; margin-left:-30px; list-style-type: none; counter-reset: chrome-counter; } li:before { content: counter(chrome-counter, lower-roman); padding: 1px 2px; margin-right: 0.2em; font-weight: bold; } li { margin: 2px 0; padding: 1px 4px; font: normal bold 18px/32px ms-sans, geneva, sans-serif; display: inline-block; width: 40px; text-align: center; color: #fff; counter-increment: chrome-counter; } li:hover { padding: 4px 8px; color: #333; /*content : '..';*/ counter-reset : counter(chrome-counter, upper-roman); box-shadow: 0px 0px 4px #222; border-radius: 1.5em .5em / 2.5em 2em; } li:hover:before { content: counter(chrome-counter, upper-roman); padding: 1px 2px; margin-right: 0.2em; font-weight: bold; } .cc1 { background-color: #ff6766; color: #fff; } class="snippet-code-html lang-html prettyprint-override"> <ul class="scheme"> <li class="cc1" ></li> <li class="cc1" ></li> <li class="cc1" ></li> </ul>

here illustration changing html content asked in comments:

class="snippet-code-css lang-css prettyprint-override">ul { min-height: 30px; width: 180px; margin-left:-30px; list-style-type: none; counter-reset: chrome-counter; } li:before { content: counter(chrome-counter, lower-roman); padding: 1px 2px; margin-right: 0.2em; font-weight: bold; } li { margin: 2px 0; padding: 1px 4px; font: normal bold 18px/32px ms-sans, geneva, sans-serif; display: inline-block; width: 40px; text-align: center; color: #fff; counter-increment: chrome-counter; } li:hover { padding: 4px 8px; color: #333; /*content : '..';*/ counter-reset : counter(chrome-counter, upper-roman); box-shadow: 0px 0px 4px #222; border-radius: 1.5em .5em / 2.5em 2em; } li:hover:before { content: ""; padding: 1px 2px; margin-right: 0.2em; font-weight: bold; } li span {display: none} li:hover span {display: initial} .cc1 { background-color: #ff6766; color: #fff; } class="snippet-code-html lang-html prettyprint-override"> <ul class="scheme"> <li class="cc1" ><span>#</span></li> <li class="cc1" ><span>0</span></li> <li class="cc1" ><span>*</span></li> </ul>

css css-counter