CSS分割线中间字是如何实现的呢?
.vertical-line { border-left: 1px solid #333; height: 50px; }
其中,.vertical-line
为自定义的 CSS 类名,border-left
属性生成左边框,1px
代表线宽,solid
代表实线,#333
代表颜色值。
当我们需要在分割线中间添加文本时,可以使用伪元素 ::before
和 ::after
,如下所示:
.vertical-line::before { content: ""; display: block; border-top: 1px solid #333; width: 10px; margin: 0 auto; } .vertical-line::after { content: "中间字"; display: block; text-align: center; position: relative; top: -10px; font-size: 12px; background: #fff; padding: 0 5px; }
第一段代码中,::before
生成一条水平分割线,content
指定伪元素的内容为空字符串,display: block
使伪元素成为块级元素,border-top
生成上边框,width: 10px
指定伪元素的宽度为 10 像素,margin: 0 auto
居中显示。
第二段代码中,::after
生成一个块级元素,content
指定伪元素的内容为文本 "中间字"
,text-align: center
居中显示文本,position: relative
相对定位,top: -10px
上移 10 像素,使文本显示在分割线中间位置,font-size:12px
设置文本字号,background: #fff
设置背景色为白色,padding: 0 5px
设置内边距为 0 上下,5 像素左右。