Open In App

Adding HTML entities using CSS content

Last Updated : 12 Apr, 2019
Improve
Improve
Like Article
Like
Save
Share
Report

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:'<';
            color:'green';
        }
        h1:after {
            content:'>';
            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:



Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads