string concatenation in css

I don't think you can. In the content property you can "concatenate" just by separating with a space, but in other places I don't think there is such a feature. Which is a shame.

You'll probably be best off specifying this style in a style attribute whenever the type attribute is used.

CSS performs concatenation without using any operator (e.g. +, &, etc). Keep your strings in quotes combine the strings, attr, var, etc into one line.

Examples:

• url('not/very' '/useful/concatenation'); // not/very/useful/concatentation
• url('../img/icons/' attr('type') '_10.png'); //../img/icons/${type}_10.png
• url(attr('href') '#hash'); // https://${href}/#hash
• url(var(--hello) ' world'); // Hello World

No, you can't do this in plain CSS because the CSS language hasn't control structures or anything like that wich will allow you to dinamically generate CSS code.

Instead, you can use a javascript solutions or a solution based on CSS variables coded in PHP.