how to use before pseudo class in css

1<style>
2div {
3  width: 100px;
4  height: 100px;
5  position: relative;
6  border: 1px solid black;
7}
8
9div:after {
10  background-color: var(--my-color-var);
11  content: '';
12  position: absolute;
13  top: 0;
14  bottom: 0;
15  right: 0;
16  left: 0;
17}
18</style>
19<div style="--my-color-var: orange;"></div>

1a::before {
2  content: "whatever content you want to display";
3  /*css declaration*/
4}