before和after伪类学习

来源：互联网发布：杭州西湖软件测试编辑：程序博客网时间：2024/06/06 21:03

今天用before和after伪类写了个阴影样式，用了半天时间。。（好菜）*_^*,代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>InnerHtml</title>
</head>
<style>

.ba{
   width:500px;
   height:200px;
   text-align:center;
   line-height:150px;
   border:1px dashed red;
   background:#FFF;
   margin:50px auto;
}
.p{
   position:relative;
}
.p::before,.p::after{
   position:absolute;
   z-index:-1;
   content:"";
   width:200px;
   height:10px;
   background:#777;
   left:10px;
   max-width:200px;
   bottom:10px;
   box-shadow:0 10px 20px 0px;
   top:90%;
   transform:rotate(-3deg);
}
.p::after{
   right:10px;
   left:auto;
   transform:rotate(3deg);
}

</style>
<body>

<div class = "ba p"><h1> before : after </h1></div>

</body>
</html>

===============以上是代码=================

效果图：

给父容器加个背景色，必须的

0 0