CSS The Forgotten Attributes -(counter and attr)

Do you want to add automation to your CSS?
Ok, not really automation, but some cool tricks- that maybe you’re not familiar with, that can save you code and time.
in this short article I what to present two cools thing in CSS.
Inspire by my friend Elad Shechter , I want to take part of his cool game and show you how he achieves this cool behavior of the score panel with:

CSS Counters:

The CSS counter lets you achieve counter that base only on the html element structure , no JS involved !!!
Look at this simple example:

you can find the code here — https://codepen.io/yanai/pen/vYOqqVP

Now, let’s understand the parts to use CSS counter. We need an anchor point-called counter-reset, In this example we have two of them:
1. In the body element for increment when checkbox is checked.
2. In the div to present a number of checkboxes with after pseudo class.

body{
 counter-reset: checkBox-counter 0 ;
}
div{
  counter-reset: checkBox-length; 
...

counter-reset get unique name for the counter, the default value is 0, you can set a default value as the second argument , and you can set more than one counter in one statement -like this:

counter-reset: checkBox-counter -3 checkBox-length;

The checkBox-counter default value will be now -3 and checkBox-length will be 0;

After you set the counter you can increment them with the property counter increment -that also can get a value as a second argument- and the default value will be 1;
In this example I increment the value in two places -for each checkbox input.
I increment the checkBox-length counter, and when checkbox is checked I increment the checkBox counter.

input[type="checkBox"]::after{
    counter-increment: checkBox-length;
 }
  input:checked{
     counter-increment: checkBox-counter;
  }
}

The final step is to use the counter value, with counter () or counters () function in a content property.

input[type="checkBox"]::after{
    ...
    content: counter(checkBox-length);
    ...
}
main::after{
  content: "you select: " counter(checkBox-counter) " checkbox";
 ...
}

there a little differences between the functions -you can read about them here.

And new you can understand how Elad sums up the score in his cool game.

The second cool thing I want to re-present (I’m sure most of you know this technique):

Use Content with attr —Attribute:

I needed at my work to create a counter that responded to like buttons and dis-like.
I thought how I can achieve it without using necessary elements just to “hold the next value and the previous one” -because this like counter can be shown many times in one page.
So I decided to use custom data attributes to hold the next / previous value , in this simple example I only show you the change value when the range changed.

https://codepen.io/yanai/pen/vYNEEJQ

The point here is not the animation or the simple JS code.
The focus is on the code in the CSS:

content: attr(data-counter);

That line give me the ability to show any attribute value in the css content attribute.
You can use any attribute like: href, src, width… and even any framework attribute ,if is on the html element.

Both the method that i shown you are not a accessibility friendly (yet???) ,so consider it.

Thanks for staying that long ,I hope this article will help you 😊
If you liked this article, please add claps and share.

Yanai Edri