使用伪元素 before 叹号

1. .tip {
2.   width: 400px;
3.   line-height: 150%;
4.   border-left-color: #f66;
5.   color: #666;
6.   padding: 12px 24px 12px 30px;
7.   margin: 2em 1em;
8.   border-left-width: 4px;
9.   border-left-style: solid;
10.   background-color: #f8f8f8;
11.   position: relative;
12.   border-bottom-right-radius: 2px;
13.   border-top-right-radius: 2px;
14. }
15. .tip::before {
16.   content: "!";
17.   background-color: #f66;
18.   position: absolute;
19.   top: 14px;
20.   left: -12px;
21.   color: #fff;
22.   width: 20px;
23.   height: 20px;
24.   border-radius: 100%;
25.   text-align: center;
26.   line-height: 20px;
27.   font-weight: bold;
28.   font-family: "Dosis", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
29.   font-size: 14px;
30. }