使用伪元素 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. }