源代码：<!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
|
