CSS 数据类型

CSS 数据类型 <string> 表示文本或字符串。它在各种属性中用于指定文本内容，例如伪元素上下文中的内容属性（::before 和 ::after）。 <string> 数据类型用于插入文字文本或动态生成文本内容。

  • 组成 <string> 数据类型的 Unicode 字符包含在 double (" ") 或单引号 (')。

  • 几乎每个字符都有直接表达式。

    或者，所有字符都可以用其相应的 Unicode 代码表示十六进制格式的点，前面有一个反斜杠 (\)。双引号 (\22)、单引号 (') 和版权符号 (©) 分别由 \22、\27 和 \A9 表示。

  • 要输出新行，请使用换行符（\A 或 \00000A）对其进行转义。如果字符串跨越多行，则字符串中每个新行的最后一个字符应为 \。

CSS <string>: 基本示例

以下示例演示了 <string> 数据类型在 content 属性中的用法。

<html>
<head>
<style>
   body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      margin: 0;
      padding: 20px;
      background-color: #f4f4f4;
   }
   .container {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
   }
   .box {
      position: relative;
      width: 400px;
      height: 400px;
      background-color: #ed8013;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
   }
   .box::before {
      content: "\"Life\" is never 'fair', And perhaps it is good thing for most of us that it is \'not\'." " - Oscar Wilde";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 24px;
      font-weight: bold;
      color: #fff;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
   }
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>