14.before_after - HTML5&CSS3.0基础部分-xyphf_::before画方块-优快云博客

本文链接：https://blog.youkuaiyun.com/xyphf/article/details/74308667

1.before_after插入文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
#div1{width:500px; height:200px; font-size:30px; border:1px solid red;}
#div1:before{ content:"我是前面"; color:red;}
#div1:after{ content:"我是后面"; color:red;}
</style>
</head>
<body>
<div id="div1">中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国</div>
</body>
</html>

2.before_after插入图标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
p{height:100px;font-size:30px;border:1px solid red;}
p:before{content:"☏";color:red;}
p:after{content:"❤"; color:red;}
</style>
</head>
<body>
<p>中华人民共和国万岁</p>
<p>中华人民共和国万岁</p>
<p>中华人民共和国万岁</p>
</body>
</html>

3.before_after插入方块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
#div1{position:relative;width: 800px;height: 200px;font-size: 30px;
border: 1px solid red;}
#div1:before{content:"";position:absolute;left:100px;top: 150px;
background:red;width:100px;height:100px;}
</style>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

4before_after引入网络元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
#div1{position:relative;width:800px;height:500px;font-size:30px;border:1px solid red;}
#div1:before{content:url(https://www.baidu.com/img/bd_logo1.png);}
</style>
</head>
<body>
    <div id="div1"></div>
</body>
</html>