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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:



My Personal Notes arrow_drop_up

I am a quick learner and eager to learn new technologies

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.