CSS 数据类型 - string

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

组成 <string> 数据类型的 Unicode 字符括在双引号（“”）或单引号（'）中。
几乎每个角色都有直接的表达。或者，所有字符都可以由其对应的十六进制格式的 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>

打印本页