Shulou(Shulou.com)06/03 Report--

What this article shares with you is about the application of before and: after and box-shadow in the pseudo-elements of CSS. The editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article.

Using CSS pseudo elements: before and: after can insert content before and after the document without changing the original structure of the document, combined with box-shadow can achieve a very cool effect.

Here are three examples:

1. Use: before and: after to add background, such as putting quotation marks before and after a paragraph

2. Use: before,: after, box-shadow to achieve 3D shadow effect.

3. Use: before,: after, box-shadow to achieve photo overlay effect.

The code is as follows:

Pseudo Demo

Body {background-color:#ccd3d7;padding:40px;}

H3 {display:block;border-bottom:1px solid # ddd;padding:15px;}

P.myquote {padding:1em;font-size:16px;margin:8px 1m positional position relative to colorvision linelineheightRod 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: ""; padding-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 (0pc0pl 0pl 0.3)

-moz-box-shadow: 2px 2px 5px rgba (0pc0pl 0pl 0.3)

Box-shadow: 2px 2px 5px rgba (0. 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 (0pc0pl 0pl 0.3)

-moz-box-shadow: 2px 2px 5px rgba (0pc0pl 0pl 0.3)

Box-shadow: 2px 2px 5px rgba (0. 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)

}

CSS Demo: before,: after, box-shadow

The most precious thing of man is life. Life belongs to people only once. A man's life should be spent like this: when he recalls the past, he will not regret wasting his time, nor will he be ashamed of mediocrity.

Steel is made by burning in a hot fire and highly cooled, so it is very strong. Our generation is also tempered in struggles and hardships, and has learned never to be discouraged in life.

Achieve results:

These are the before and: after and box-shadow applications in CSS pseudo-elements. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.