Open In App

Adding HTML entities using CSS content

HTML provides some method to display reserved character. Reserved characters are those characters which are either reserved for HTML or those which are not present in the basic keyboard. For Example: ‘<‘ is already reserved in HTML language. Sometimes this character needs to display on the web page which creates ambiguity in code. Along with these are the character which is normally not present in the basic keyboard ( £, ¥, €, © ), etc. HTML provides some Entity name and Entity number to use these symbols. Entity number is easy to learn. See the list of HTML entities.

Example: This example uses HTML entities using CSS to add some content in the document.




<!DOCTYPE HTML>
<html>
  
<head>
      
    <!--If you write HTML entities directly, then 
    it will not provide the desired result-->
      
    <!--If you add < symbol before the content,
    then it will not produce the desired result-->
      
    <!-- If you add > symbol after the content, 
    then it will not produce the desired result-->
  
    <style>
        h1:before {
            content:'&lt';
            color:'green';
        }
        h1:after {
            content:'&gt';
            color:'green';
        }
        h1 {
            color:green;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeeks</h1>
</body>
  
</html>                    

Output:



Example 2: This example adds greater than and less than sign using CSS, The greater than and less then sign added using its corresponding escaped Unicode.

Example:




<!DOCTYPE HTML>
<html>
  
<head>
    <!--If you want to add < symbol before the content,
    then use its "Unicode<div id="practice"></div>" which is "003C"-->
      
    <!--If you want to add > symbol after the content,
    then use its "Unicode" which is "003E"-->
  
    <style>
        h1:before {
            content:'\003C';
            color:'green';
        }
        h1:after {
            content:'\003E';
            color:'green';
        }
        h1 {
            color:green;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeeks</h1>
</body>
  
</html>                    

Output:




Article Tags :