a "preprocessor" for HTML? without JS

Question

In a CSS sheet, I created a new tag

gb {
    color: green;
}

and in the HTML code, I would replace without javascript, all occurences of

<gb> &#9632; </gb>  <!-- green bullet -->

with something like <gb /> . (Like using the C preprocessor, but doing thing in native HTML/CSS, without need to another program (cpp) and action (preprocessing) before sending the page on the web)

In other terms, how could I create custom HTML tag, with content (saving typing the ■ code), but only using HTML/CSS ?

And, yes, a lot of content already address custom HTML tags, but

1. They generally use Javascript
2. It is not clear
3. I can't believe such a little thing could involve these cumbersome solutions.

The idea is just to have a short way to draw an Unicode symbol (and in color) in middle of text.

Answer 1

Option 1

You can (but you should not) create your own HTML tag:

gb::before {
  content: "\25A0";
  color: green;
}

<gb>Your text</gb>

Option 2

You can use a list with <ul> an <li> tags:

ul {
  list-style: none;
  padding-left: 0px;
}

li:before {
  content: "\25A0";
  color: green;
  padding-right:5px;
}

<ul>
  <li>Line 1</li>
  <li>Line 2</li>
  <li>Line 3</li>
</ul>

Option 3

You can use a <span> tag :

.gb::before {
  content: "\25A0";
  color: green;
  padding-right:5px;
}

<span class="gb">Your text</span>