使用CSS内容添加HTML实体

在HTML和CSS中，实体是具有保留含义或表示的特殊字符。它们通常用于显示标准键盘上无法直接输入的字符，或者表示具有特定语义含义的特殊符号或字符。

CSS提供了一种使用content属性添加HTML实体的方式。content属性主要与伪元素一起使用，例如::before和::after选择器，用于在元素之前或之后插入内容。

CSS ::before和CSS ::after选择器

::before选择器用于在每个所选元素的内容之前添加或插入内容。以下是语法 –

语法

::before {
   css declarations;
}

::after选择器用于在每个选定元素的内容后面添加或插入内容。以下是语法-

::after {
   css declarations;
}

我们使用CSS的 content 属性与上述选择器一起指定要插入的内容。

方法

以下是使用CSS content属性添加HTML实体的方法：

首先，我们需要创建一个HTML文件，然后使用<body>标签，在任何文本标签（例如<p>和<h1>）中添加一些内容。
然后使用 ::after 和 ::before 伪元素添加CSS。然后添加content属性。

示例

在下面的示例中，我们使用CSS content属性添加HTML实体“<”（大于号）和“>”（小于号）-

<html>
<head>
   <title>Adding HTML entities using CSS content</title>
   <style>
      h3::before {
         content: '<';
         background-color: yellow;
         color: red;
         font-weight: bold;
      }

      h3::after {
         content: '>';
         background-color: yellow;
         color: red;
         font-weight: bold;
      }

      h3 {
         color: green;
      }
   </style>
</head>
<body>
   <h3>Tutorialspoint</h3>
</body>
</html>

正如我们在下面的输出中所看到的，HTML实体“<”和“>”在文本前后添加。

示例

在这里，我们添加的是与前一个示例中相同的HTML实体和它们对应的Unicode –

<html>
<head>
   <title>Adding HTML entities using CSS content</title>
   <style>
      h3::before {
         content: '\003C';
         background-color: yellow;
         color: red;
         font-weight: bold;
      }
      h3::after {
         content: '\003E';
         background-color: yellow;
         color: red;
         font-weight: bold;
      }
      h3 {
         color: green;
      }
   </style>
</head>
<body>
   <h3>Tutorialspoint</h3>
</body>
</html>

如果我们执行上述程序，我们可以看到”<“和”>”实体会添加它们的Unicode。

示例

在下面的例子中，我们正在使用CSS content属性添加HTML实体 { （大括号）和 } （闭合大括号）。

<html>
<head>
   <title>Adding HTML entities using CSS content</title>
   <style>
      h3::before {
         content: '{';
            background-color: yellow;
            color: red;
            font-weight: bold;
         }
         h3::after {
         content: '}';
         background-color: yellow;
         color: red;
         font-weight: bold;
      }
      h3 {
         color: green;
      }
   </style>
</head>
<body>
   <h3>Tutorialspoint</h3>
</body>
</html>

如我们所见，在输出中HTML实体 {和} 在文本前后被添加。

示例

在这里，我们将上述HTML实体与其对应的 Unicode 一起添加。

<html>
<head>
   <title>Adding HTML entities using CSS content</title>
   <style>
      h3::before {
         content: '\007B';
         background-color: yellow;
         color: red;
         font-weight: bold;
      }
      h3::after {
         content: '\007D';
         background-color: yellow;
         color: red;
         font-weight: bold;
      }
      h3 {
         color: green;
      }
   </style>
</head>
<body>
   <h3>Tutorialspoint</h3>
</body>
</html>

示例

在以下示例中，我们使用CSS content属性添加了HTML实体[（开方括号）和]（闭方括号）-

<html>
<head>
   <title>Adding HTML entities using CSS content</title>
   <style>
      h3::before {
         content: '[';
         background-color: yellow;
         color: red;
         font-weight: bold;
      }
      h3::after {
         content: ']';
         background-color: yellow;
         color: red;
         font-weight: bold;
      }
      h3 {
         color: green;
      }
   </style>
</head>
<body>
   <h3>Tutorialspoint</h3>
</body>
</html>

示例

在这里，我们使用上述HTML实体 [ 和] ，以及它们对应的Unicode-。

<html>
<head>
   <title>Adding HTML entities using CSS content</title>
   <style>
      h3::before {
         content: '\005B';
         background-color: yellow;
         color: red;
         font-weight: bold;
      }
      h3::after {
         content: '\005D';
         background-color: yellow;
         color: red;
         font-weight: bold;
      }
      h3 {
         color: green;
      }
   </style>
</head>
<body>
   <h3>Tutorialspoint</h3>
</body>
</html>

在执行给定的查询时，在文本前后添加了HTML实体[]。