<h1>Attr</h1>
<p data-text="the attr function" data-tooltip="Hi from attr!" class="attr">This text is combined with</p>
<h1>Calc</h1>
<p class="calc">Centered with calc</p>
<h1>Val</h1>
<p class="var">Colored with var</p>
<h1>Counter</h1>
<div class="counter">
  <span>Mars</span>
  <span>Bounty</span>
  <span>Snickers</span>
</div>
<h1>Circle</h1>
<img class="circle" src="https://devinduct.com/Uploads/PostImages/1122dcb9-954a-4641-9ca6-c38e9472698f.png"/>

:root {
  --bg-color: green;
  --color: white
}

p.attr::after {
  content: ' ' attr(data-text);
}

p.attr:hover::after {
  content: ' ' attr(data-tooltip);
  background-color: orange;
  color: white
}

p.calc {
  padding: 10px;
  background-color: orange;
  color: white;
  width: 200px;
  text-align:center;
  margin-left: calc(50% - 100px)
}

p.var {
  background-color: var(--bg-color);
  color: var(--color)
}

div.counter {
  counter-reset: count;
  list-style: none;
  padding: 0;
  margin: 0
}

div.counter > span {
  counter-increment: count;
}

div.counter > span::before {
  content: counter(count, decimal) '. ';
  color: orange;
}

img.circle {
  clip-path: circle(30%);
}