CSS Custom Properties

#html #css

I've been working on a Razor project and was finding a way to dynamically assign style values to ::before elements. Best way to do this is via CSS Custom Properties

Here's what I came up with Razor code:

css

.wrapper::before {
  background-color: var(--label-color);
  content: var(--label-text);
}

razor

@{
  var labelText = "Some Label";
  var labelColor = "blue";
}
<div class="wrapper" style="--label-color: @labelColor; --label-text: '@labelText'">
  Hello
</div>