<div data-age="30">30</div>
Is there a way to have (PURE CSS) div in red when age<18 and in blue where age>18
Here is an idea based on this previous answer where you can consider CSS variables:
.box { font-size:30px; padding:5px; display:inline-block; font-family:monospace; overflow:hidden; color:#fff; background: linear-gradient(red,red) 0 0/100% calc((18 - var(--a))*1px), blue; } .box:before { content:attr(style); text-indent:-4ch; display:inline-block; }
<div style="--a:30" class="box"></div> <div style="--a:18" class="box"></div> <div style="--a:9 " class="box"></div> <div style="--a:17" class="box"></div> <div style="--a:0 " class="box"></div>
2.1m questions
2.1m answers
60 comments
57.0k users