如何使用CSS content添加HTML实体?

2021年3月29日17:50:48 发表评论 830 次浏览

HTML提供了一些显示保留字符的方法。保留字符是为HTML保留的字符或基本键盘中不存在的字符。例如:" <"已经以HTML语言保留。有时, 此字符需要显示在网页上, 这会在代码中造成歧义。基本字符通常不包含这些字符(£, ¥, €, ©)等。HTML提供了一些实体名称和实体编号以使用这些符号。实体编号易于学习。请参阅清单HTML实体.

例子:本示例使用HTML实体和CSS content在文档中添加一些内容。

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

输出如下:

使用CSS content添加HTML实体1

范例2:此示例使用CSS添加大于和小于符号, 使用其对应的转义Unicode添加大于和小于符号。

例子:

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

输出如下:

使用CSS content添加HTML实体2

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: