【前端開發系列】—— 利用選擇器添加內容

時間 2019-11-19

標籤前端開發系列利用選擇器添加內容简体版

原文原文鏈接

　　上文講到了CSS3的選擇器，經過after和before選擇器，在元素先後添加內容。css

　　也能夠經過變量來實現自定義的標題html

1 　　　　h1:before{
2  content:'第'counter(mycounter)'章';
3  color:red;
4  font-size:30px;
5         }
6  h1{
7  counter-increment:mycounter;
8         }

　　代碼樣例

<html>
<head>
    <style type="text/css"> h1:before{ content:'第'counter(mycounter)'章'; color:red; font-size:30px;
        } h1{ counter-increment:mycounter;
        } p:before{ content:open-quote;
        } p:after{ content:close-quote;
        } p{ quotes:"("")";
        }
    </style>
</head>
<body>
<h1>大標題</h1>
<p>示例文字</p>
<h1>大標題</h1>
<p>示例文字</p>
<h1>大標題</h1>
<p>示例文字</p>
</body>
</html>

　　實現樣例

相關標籤/搜索