如何用css替换文本

使用CSS可以使元素看起来好像有文本。实际上,你正在做的是在之前或之后创建一个伪元素,你可以以有限的方式对其进行样式设置,而且,对于这个练习来说,重要的是,你可以包含内容。

请看这个例子,其中一个li元素以通常的方式在锚元素中包含文本,另一个则将文本作为伪元素中的内容。(我给这个li元素一个id,这样我就可以将其与原始元素区分开来——例如,你可以使用类来代替)。

请特别注意,撇号(单引号)是一个特殊字符,必须在内容设置中使用反斜杠转义。我想这是介绍这个额外需要考虑的事情的练习的一部分。

<style>

#use-css::before {
  content: 'I\'m Craftsman';
}
</style>

<ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" href="#craftsman_gateway" role="tab" data-toggle="tab" aria-expanded="true">I'm Craftsman</a>
    </li>
    <li class="nav-item">
        <a id="use-css" class="nav-link active" href="#craftsman_gateway" role="tab" data-toggle="tab" aria-expanded="true"></a>
    </li>
</ul>

以下代码为

<ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" href="#craftsman_gateway" role="tab" data-toggle="tab" aria-expanded="true">I'm Craftsman</a>
    </li>

只需更改“我是工匠”。