Can I use CSS content and counters to add custom l

Question

I'm currently creating a html grid out of divs to display a characters attributes.

Here is the DIV:

<div class="grid attributes ng-scope">
    <!-- ngRepeat: (category, attribute) in mages[0].attributes --><div ng-repeat="(category, attribute) in mages[0].attributes" ng-init="categoryIndex = $index" class="col-0 mental grid">
        <h5 class="category-header ng-binding">mental</h5>
        <!-- ngRepeat: (key, value) in  attribute --><div ng-repeat="(key, value) in  attribute" class="row-0 col-0-0 Intelligence attribute">
            Intelligence: 1
        </div><!-- end ngRepeat: (key, value) in  attribute --><div ng-repeat="(key, value) in  attribute" class="row-1 col-0-1 Resolve attribute">
            Resolve: 0
        </div><!-- end ngRepeat: (key, value) in  attribute --><div ng-repeat="(key, value) in  attribute" class="row-2 col-0-2 Wits attribute">
            Wits: 0
        </div><!-- end ngRepeat: (key, value) in  attribute -->
    </div><!-- end ngRepeat: (category, attribute) in mages[0].attributes --><div ng-repeat="(category, attribute) in mages[0].attributes" ng-init="categoryIndex = $index" class="col-1 physical grid">
        <h5 class="category-header ng-binding">physical</h5>
        <!-- ngRepeat: (key, value) in  attribute --><div ng-repeat="(key, value) in  attribute" class="row-0 col-1-0 Dexterity attribute">
            Dexterity: 0
        </div><!-- end ngRepeat: (key, value) in  attribute --><div ng-repeat="(key, value) in  attribute" class="row-1 col-1-1 Stamina attribute">
            Stamina: 0
        </div><!-- end ngRepeat: (key, value) in  attribute --><div ng-repeat="(key, value) in  attribute" class="row-2 col-1-2 Strength attribute">
            Strength: 0
        </div><!-- end ngRepeat: (key, value) in  attribute -->
    </div><!-- end ngRepeat: (category, attribute) in mages[0].attributes --><div ng-repeat="(category, attribute) in mages[0].attributes" ng-init="categoryIndex = $index" class="col-2 social grid">
        <h5 class="category-header ng-binding">social</h5>
        <!-- ngRepeat: (key, value) in  attribute --><div ng-repeat="(key, value) in  attribute" class="row-0 col-2-0 Composure attribute">
            Composure: 0
        </div><!-- end ngRepeat: (key, value) in  attribute --><div ng-repeat="(key, value) in  attribute" class="row-1 col-2-1 Manipulation attribute">
            Manipulation: 0
        </div><!-- end ngRepeat: (key, value) in  attribute --><div ng-repeat="(key, value) in  attribute" class="row-2 col-2-2 Presence attribute">
            Presence: 0
        </div><!-- end ngRepeat: (key, value) in  attribute -->
    </div><!-- end ngRepeat: (category, attribute) in mages[0].attributes -->
</div>

Is it possible to label the rows using CSS content chicanery?

Something like (CSS pseudocode below):

body{
    counter-reset: attr;
}


.attributes> [class*='col-0-']:before {

  content: label(attr);
}

Where label is something that holds my labels in an ordered list/dict? Or is this a job for SASS/SCSS type stuff?

Answer 1

CSS counters can only work with the counter() and counters() functions. They are numeric values that are incremented and tracked entirely within CSS, and can only be rendered as numeric values.

The content property can take an attribute value from the originating HTML element via the attr() function without having to use counters.

But if your desired values are coming from elsewhere, such as a JavaScript object, then unless you can express them in custom data attributes, you will need JavaScript to render them into the page.

Custom data attributes would work like so:

[data-foo]:before {
    content: attr(data-foo);
}

<div data-foo="Power">
    ...
</div>