<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类元素练习</title>
<style>
*{
padding: 0px;
margin: 0px;
}
.box{
width: 800px;
height: 600px;
margin: 20px auto;
background-color: pink;
overflow: auto;
}
.box h3{
color: red;
text-align: center;
}
p::before{
content: "我是通过before加进来的文字哦,我显示红色哦，不要认错啦";font-size: 13px; color: red;
}
p::after{
content: "我是通过after加进来的文字哦,我显示蓝色哦，不要认错啦";font-size: 13px; color:blue;
}
h4{
width: 400px;
height: 70px;
overflow: auto;
}
h4:first-letter{
color: #df4e19;
}
div{
width: 300px;
height: 50px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box">
<h3>1:before伪类元素的练习</h3>
<p>我是before前面的元素哦</p>
<h4>我是当前的元素哦，要搞清楚哦1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</h4>
<div>
<marquee direction="right" >我会飞哟我是滚动字幕呀</marquee>
<marquee direction="top" >我会飞哟我是滚动字幕呀</marquee>
</div>
</div>
</body>
</html>
