#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>
时间： 2024-10-14 07:31:51