How to Use CSS Variables

This has a 'div' with a class of 'my-element', and 'my-element' has a '::after' with 'content' of 'none'. Now I want to change the 'content' to 'hello world'. To do that I use a css vaiable;

<style>
.my-element {
  position: relative;
  background: pink;
  width: 500px;
  height: 100px;
}
.my-element::after {
  position: absolute;
  content: var(--testit, none);
  padding-left: 100px;
  margin-left: 5px;
  top: 1em;
  left: 0px;
  background: lightblue;
}
</style>

Then with a little jQuery like this:

<script>
  $(".my-element").on("click", function() {
    $(this).css('--testit', '"hello world"');
  });
</script>

Now when you click the line that says 'This is without' you will see the 'hello world' in light blue.

The two lines above 'This is without' are also done with a CSS variable (NO javascript) to get the hover effect.

<style>
article {
  padding: 2rem;
  margin-bottom: 1rem;
  cursor: pointer;
  background: lightgray;
  transition: 100ms;
}
article h2:hover {
  background: var(--custome_color);
  color: var(--color);
}
article h2 {
  font-size: 1.8rem;
  margin-bottom: .5rem;
}
</style>

<article>
<h2 style='--custome_color: red;'>This is a test</h2>
<h2 style='--custome_color: blue; --color: white;'>More test</h2>
<div class='my-element'>This is without</div>
</article>

This is a test

More test

This is without