HTML 的 "preprocessor"？没有JS

a "preprocessor" for HTML? without JS

在CSSsheet中，我创建了一个新标签

gb {
    color: green;
}

并且在 HTML 代码中，我将替换 而没有 javascript，所有出现的 

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

与 <gb /> 之类的东西。 （类似于使用 C 预处理器，但在本机中执行操作 HTML/CSS，在将页面发送到网络之前不需要另一个程序 (cpp) 和操作（预处理））

换句话说，我如何创建带有内容的自定义 HTML 标签（节省输入 &#9632; 代码），但仅使用 HTML/CSS ？

而且，是的，很多内容已经解决了自定义 HTML 标签，但是

  1. 他们一般用Javascript
  2. 不清楚
  3. 真不敢相信这么一件小事竟然涉及到这些繁琐的解决方案。

我们的想法只是一个简短的方法在文本中间绘制一个 Unicode 符号（并且是彩色的）.

选项 1

您可以（但您不应该）创建自己的 HTML 标签：

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

<gb>Your text</gb>

选项 2

您可以使用带有 <ul> 和 <li> 标签的列表：

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

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

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

选项 3

您可以使用 <span> 标签：

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

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

要使用关于 HTML 生活标准有效的 custom tag，您只需在标签名称中使用连字符。

<g-b>Hello</g-b>

那你可以按照Valentin的回答"Option 1"。

g-b::before {
  content: "A0";
  color: green;
}

r-b::before {
  content: "A0";
  color: red;
}

<g-b>Text 1</g-b>
<br>
<r-b></r-b>Text 2