时间戳

首页 > 解决方案 > 如何用css替换文本

css - 如何用css替换文本

问题描述

我需要替换的文本是：“我是工匠”

它存在于以下代码中：

<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>

标签： csswordpress

解决方案

使用 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>

推荐阅读