源代碼：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>偽元素before與after</title>
<style>
h2:before{/*after也可以*/
content: "刺猬";
color: #ff0d20;
padding: 0px 10px 0px 10px;/*左右*/
margin-right: 10px;
}
h2.nocontent:before{/*h4不插入*/
content: none;
}
</style>
</head>
<body>
<h1>(h1)偽元素before與after</h1>
<h2>(h2)致敬偶像最好方式就是擊敗她 20歲大阪直美做到了</h2>
<h2>(h2)致敬偶像最好方式就是擊敗她 20歲大阪直美做到了</h2>
<h2 class="nocontent">(h2)致敬偶像最好方式就是擊敗她 20歲大阪直美做到了</h2>
<h2>(h2)致敬偶像最好方式就是擊敗她 20歲大阪直美做到了</h2>
<h2>(h2)致敬偶像最好方式就是擊敗她 20歲大阪直美做到了</h2>
<h2>(h2)致敬偶像最好方式就是擊敗她 20歲大阪直美做到了</h2>
</body>
</html> 結果：
插入圖片示例： <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插入圖片before</title>
<style type="text/css">
h2:before{
content: url(mm.png);
}
</style>
</head>
<body>
<h1>插入圖片before</h1>
<h2>插入圖片文件</h2>
<h2>插入圖片文件</h2>
<h2>插入圖片文件</h2>
<h2>插入圖片文件</h2>
<h2>插入圖片文件</h2>
<h2>插入圖片文件</h2>
</body>
</html>
結果： 實例二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插入圖片before</title>
<style type="text/css">
/* h2:before{
content: url(mm.png);
}*/
h2.m1:after{
content: url("m1.png");
}
h2.m2:after{
content: url("m2.png");
}
</style>
</head>
<body>
<h1>插入圖片before</h1>
<h2 class="m1">插入圖片文件</h2>
<h2 class="m2">插入圖片文件</h2>
<h2 class="m1">插入圖片文件</h2>
<h2 class="m1">插入圖片文件</h2>
<h2>插入圖片文件</h2>
<h2>插入圖片文件</h2>
</body>
</html>
分享知識，分享快樂！希望中國站在編程之巔！ ----融水公子 公眾微信號：rsgz520
360圖書館館號：rsgz002.360doc.com
|
