CSS Data Type - <string>

CSS data type <string> represents text or character strings. It is used in various properties to specify textual content, such as the content property in the context of pseudo-elements (::before and ::after). The <string> data type is used to insert literal text or generate text content dynamically.

  • The Unicode characters that make up the <string> data type are enclosed in double ("") or single (') quotes.

  • Almost every character has a direct expression.

    Or, all characters can be represented by their corresponding Unicode code points in hexadecimal format, with a backslash (\) before them. A double quotation (\22), a single quote ('), and the copyright symbol (©) are represented by \22, \27, and \A9, respectively.

  • To output new lines, escape them using a line feed character (\A or \00000A). If strings span several lines, the final character of each new line in a string should be a \.

CSS <string> - Basic Example

The following example demonstrates the usage of <string> datatype in content property.

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