:before :after

#p1:before{
content: "哈哈哈 ";
color: red;
}
#p1:after{
content: "哈哈哈";
color: #452dff;
}
content: url('img.jpg');
content: attr(href);
content: " (" attr(href) ")"

太极图

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style type="text/css">
 7         #p1:before{
 8             content: "哈哈哈 ";
 9             color: red;
10         }
11 
12         #p1:after{
13             content: "哈哈哈";
14             color: #452dff;
15         }
16 
17        #a1:after{
18            content: attr(href);
19        }
20 
21 
22         #yin-yang {
23             width: 96px;
24             height: 48px;
25             background: #eee;
26             border-color: red;
27             border-style: solid;
28             border-width: 2px 2px 50px 2px;
29             border-radius: 100%;
30             position: relative;
31         }
32 
33         #yin-yang:before {
34             content: "";
35             position: absolute;
36             top: 50%;
37             left: 0;
38             background: #eee;
39             border: 18px solid red;
40             border-radius: 100%;
41             width: 12px;
42             height: 12px;
43         }
44 
45         #yin-yang:after {
46             content: "";
47             position: absolute;
48             top: 50%;
49             left: 50%;
50             background: red;
51             border: 18px solid #eee;
52             border-radius:100%;
53             width: 12px;
54             height: 12px;
55         }
56     </style>
57 </head>
58 <body>
59 <p id="p1">我是一个兵  </p>
60 <a id="a1" href="https://www.baidu.com">百度</a>
61 <br>
62 <div id="yin-yang"></div>
63 </body>
64 </html>

View Code

分割线

.mask { overflow: hidden; height: 20px; }
.mask:after { content: ''; display: block; margin: -25px auto 0;  100%; height: 25px; border-radius: 125px/12px; box-shadow: 0 0 8px black; }