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>
To Continue Learning Please Login
Login with Google