trying to use loop.length with some dynamic css

Question

I'm using CSS calc to help make my links the proper width and still account for the margins that separate them. The number of links here will vary between 3 and 5 and I wanted to not have to update my CSS when this changes. The code below works except the code is written after CSS is run and therefore doesn't set the width for the links as I'd want. Is there a way to get this to work using Craft or is this a problem with the way calc works?

{% set contactLinkCSS %}
    {% for block in contactLinks.contactLinks.type("contactLink") %}
        {% set count = 100 / loop.length %}
        .{{ block.contactLinkName | slugify }}:hover {
            width:calc({{ count }}% - 0.625rem);
            background-color: {{ block.contactLinkColor }}
        }
    {% endfor %}
{% endset %}

Answer 1

Turns out I was trying to add this to my :hover state and not the initial state. Problem solved by adding a new rule and putting the width in there.