:after选择器-----分割线

时间:2019-08-21
本文章向大家介绍:after选择器-----分割线,主要包括:after选择器-----分割线使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

一、分割线一:

效果:

代码:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style>
 7             div{
 8                 width:300px;
 9                 height: 20px;
10                 background-color:#FFFFFF;
11                 text-align: center;
12                 position: relative;
13             }
14             div:after {
15                 content: "";
16                 width: 100%;
17                 height: 1px;
18                 background-color: red;
19                 position: absolute;
20                 top: 50%;
21                 left: 0;
22             }
23             div span {
24                 z-index:1;
25                 position: relative;
26                 background-color:#FFFFFF;
27                 padding:0 5px;
28             }
29         </style>
30     </head>
31     <body>
32         <div class="hot">
33             <span>茶品营销</span>
34         </div>
35     </body>
36 </html>
分割线一

原文地址:https://www.cnblogs.com/heisetianshi/p/11387833.html