HTML的“预处理器”？没有 JS答案

【问题标题】：a "preprocessor" for HTML? without JSHTML的“预处理器”？没有 JS
【发布时间】：2017-07-07 10:13:42
【问题描述】：

在 CSS 表单中，我创建了一个新标签

gb {
    color: green;
}

在 HTML 代码中，我会替换 without javascript，所有出现的

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

类似于 <gb /> 。 （与使用 C 预处理器类似，但使用原生 HTML/CSS 执行操作，无需其他程序 (cpp) 和操作（预处理）即可将页面发送到网络上）

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

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

这个想法只是有一个一种捷径在文本中间绘制一个Unicode符号（和颜色）。

【问题讨论】：

你是否“相信”并不重要......这并没有改变一个基本事实，即仅使用 HTML 和 CSS 不可能以任何微不足道的方式实现。跨度>
HTML 不允许您创建自定义元素（有自定义元素规范，但仍是草稿，您的代码不符合它）
基本上你可以将<gb>标签写入HTML，它会像正常的<div>一样工作。
为什么你一开始就不应该这样做（尤其是如果你不想使用任何 JavaScript），Quentin 已经在 cmets 中指出。 CSS 生成的内容是 CSS 的“功能”，是的。但是它与自定义元素没有任何关系。例如，如果您将其应用于 div，则其工作方式相同。
为什么这个问题和答案被否决了？ OP 要求一种不在自定义标签内重复符号的方法。已添加答案。它正在工作并且适合问题。怎么了？

【解决方案1】：

选项 1

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

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

&lt;gb&gt;Your text&lt;/gb&gt;

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

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>

您可以使用<span> 标签：

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

&lt;span class="gb"&gt;Your text&lt;/span&gt;

【讨论】：

好！它几乎奏效了！不仅仅是<gb/>（后面的所有文本都用绿色表示），而是<gb></gb>。
@Quentin 不同意你的看法。创建自定义 HTML 标签是有效的。这里是related question about this。
@VadimOvchinnikov — 自定义元素规范是 (a) 草案并且 (b) 不允许 gb 作为自定义元素的标记名称。所以不，它是无效的。另外（c）您还没有编写 JavaScript（OP 说他们不想使用）来注册自定义元素。 They are also not widely supported.
@ValentinGenevrais 问题不在于列表...更多将这个方形符号放在许多地方...
@ValentinGenevrais 老实说，即使有第一个解决方案，我也可以。我不关心 HTML 的有效性。这适用于所有浏览器，为什么有人要关心？

【解决方案2】：

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

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

然后你可以按照 Valentin 的回答“选项 1”。

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

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

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

【讨论】：