CSS-05-僞類及僞元素選擇器

時間 2019-11-10

標籤 css 元素選擇器欄目 CSS 简体版

原文原文鏈接

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             
 8             .ha{
 9                 text-align: center;
10                 width: 200px;
11                 height: 200px;
12                 background-color: green;
13             }
14             /*hover:鼠標懸停後有動態解釋效果*/
15             .ha:hover{
16                 width: 500px;
17                 height: 500px;
18                 background-color: yellowgreen;
19             }
20             
21             /*after:在元素裏面的尾部插入內容*/
22             .ha:after{
23                 content: '!!!!';
24                 background-color: red;
25             }
26             
27             /*before:在元素裏面的頭部插入內容*/
28             .ha:before{
29                 content: '$$';
30                 color: darkblue;
31             }
32         </style>
33     </head>
34     <body>
35         <div class="ha" >僞類及僞元素選擇器</div>
36     </body>
37 </html>

相關標籤/搜索