僞元素

時間 2019-11-24

標籤元素简体版

原文原文鏈接

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7     /*
 8     使用僞元素來表示元素中的一些特殊的位置
 9     
10     1.爲p中第一個字符來設置一個特殊的樣式
11     */
12    p:first-letter{
13        color: red;
14        font-size: 20px;
15    }
16    /*
17    2.爲p中的第一行設置一個背景顏色爲黃色
18    */
19   p:first-line{
20       background-color: yellow;
21   }
22   /*
23   3.before表示元素最前邊的部分
24   通常before都須要結合content這個樣式一塊兒使用
25   經過content能夠向before或after的位置添加一些內容
26   */
27   p:before{
28       content: "我會出如今整個段落的最前邊";
29       color: red;
30   }
31   /*
32   4.after表示元素最後邊的部分
33   */
34  p:after{
35      content: "我會出如今整個段落的最後邊";
36      color: orange;
37  }
38         </style>
39     </head>
40     
41     <body>
42         <p>我是一個僞元素</p>
43     </body>
44 </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。