Here are three examples:
1, use: Before and: After adding a background, such as a paragraph of text before and after the quotation marks;
2, use: Before,: After, Box-shadow achieve 3D shadow effect;
Use: Before,: After, Box-shadow to achieve the effect of superimposed photos.
Copy code code as follows:
<! DOCTYPE html>
<title>pseudo demo</title>
<style>
Body{background-color: #ccd3d7;p adding:40px;}
h2{display:block;border-bottom:1px solid #ddd;p adding:15px;}
P.myquote{padding:1em;font-size:16px;margin:8px 1em;position:relative;color:blue;line-height:1.7em;}
P.myquote:before,p.myquote:after{font-size:40px;position:absolute;padding:0;margin:0;color:green;}
p.myquote:hover:before,p.myquote:hover:after{color:red;font-size:50px;}
P.myquote:before{content: "" "; left:0;left:-10px;}
P.myquote:after{content: "" ";p adding-left:15px;bottom:4px;}
. shbox{
Background: #fff;
padding:10px;
width:90%;
margin:40px Auto;
Height:auto;
margin:40px Auto;
}
. sh-down-lr{position:relative;}
. sh-down-lr:before,.sh-down-lr:after{
Z-index:-1;
Position:absolute;
Content: "";
bottom:15px;
left:10px;
width:50%;
top:80%;
max-width:300px;
Background: #777;
-webkit-box-shadow:0 15px 10px #777;
-moz-box-shadow:0 15px 10px #777;
box-shadow:0 15px 10px #777;
-webkit-transform:rotate ( -3DEG);
-moz-transform:rotate ( -3DEG);
-o-transform:rotate ( -3DEG);
-ms-transform:rotate ( -3DEG);
Transform:rotate ( -3DEG);
}
. sh-down-lr:after{
-webkit-transform:rotate (3DEG);
-moz-transform:rotate (3DEG);
-o-transform:rotate (3DEG);
-ms-transform:rotate (3DEG);
Transform:rotate (3DEG);
right:10px;
Left:auto;
}
. stackone {
BORDER:6PX solid #fff;
width:400px;
height:225px;
margin:50px;
position:relative;
-webkit-box-shadow:2px 2px 5px Rgba (0,0,0,0.3);
-moz-box-shadow:2px 2px 5px Rgba (0,0,0,0.3);
box-shadow:2px 2px 5px Rgba (0,0,0,0.3);
}
. Stackone img{width:100%;heigth:100%;}
. stackone:before,.stackone:after {
Content: "";
width:400px;
height:225px;
Background: #aaa;
BORDER:6PX solid #fff;
Position:absolute;
Z-index:-1;
top:0;
left:-10px;
-webkit-box-shadow:2px 2px 5px Rgba (0,0,0,0.3);
-moz-box-shadow:2px 2px 5px Rgba (0,0,0,0.3);
box-shadow:2px 2px 5px Rgba (0,0,0,0.3);
-webkit-transform:rotate ( -5DEG);
-moz-transform:rotate ( -5DEG);
-o-transform:rotate ( -5DEG);
-ms-transform:rotate ( -5DEG);
Transform:rotate ( -5DEG);
}
. stackone:after {
top:5px;
left:0;
-webkit-transform:rotate (3DEG);
-moz-transform:rotate (3DEG);
-o-transform:rotate (3DEG);
-ms-transform:rotate (3DEG);
Transform:rotate (3DEG);
}
</style>
<body>
<div class= "Shbox sh-down-lr" >
<p class= "Myquote" > The most Valuable thing is life. Life belongs to man only once. A man's life should be spent in this way: when recalling the past, he will not regret for wasting time, and will not be ashamed .</p>
<p class= ' myquote ' > Steel is made in flames and is highly cooled, so it is strong. Our generation is also tempered in struggle and hard test, and learns to never be discouraged in life. </p>
</div>
<div class= "Shbox" style= "Background:none;" >
<div class= "Stackone" >
<div>
</div>
</body>
To get the final result as follows:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
