主页 > 教程合集 > Html/css >

用CSS伪类before和after做左右横线中间文字效果

时间:2018-05-04 阅读:0

什么是:before和:after? 该如何使用他们?

:before是css中的一种伪元素,可用于在某个元素之前插入某些内容。

:after是css中的一种伪元素,可用于在某个元素之后插入某些内容。

如下代码则代表分别在p标签前后加入字符“H”和字符“d”:


  <style>
        p:before{
                content: "H" /*:before和:after必带技能,重要性为满5颗星*/
        }
        p:after{
                content: "d" /*:before和:after必带技能,重要性为满5颗星*/
        }
    </style>
    <p>ello Worl</p>
 

那么有的时候我们会在网页设计当中遇到大标题处加横线的效果,如下:

用CSS伪类before和after做左右横线中间文字效果

这个效果是可以用图片做出来的,但是图片比较占内存,我们最好是用css来实现,而此时CSS伪类before和after就发挥奇效了。

且看HTML代码:


<div class="container">
        <h3 class="title">Welcome to <span>Snapshot</span></h3>
</div>
 

CSS代码:


.container{width: 1000px;margin: 10px auto;border: 1px solid red;}
h3.title {color: #F2AE11;font-size: 1.3em;margin-bottom: 3em;text-align: center;font-weight: 500;line-height: 1.1;}
h3.title span {display: block;/*设置为块级元素会独占一行形成上下居中的效果*/font-size: 3em;color: #212121;position: relative; /*定位横线(当横线的父元素)*/}
h3.title span:before, h3.title span:after {content: ''; /*CSS伪类用法*/position: absolute;/*定位背景横线的位置*/top: 52%;background: #494949;/*宽和高做出来的背景横线*/width: 9%;height: 2px;}
h3.title span:before{left: 20%;/*调整背景横线的左右距离*/}
h3.title span:after {right: 20%;}
 

最终效果:

用CSS伪类before和after做左右横线中间文字效果

总结:

1,这种方法比利用边框和背景图做出的效果更好更利于控制和修改

2,缺点是伪类在IE8上兼容有些问题

如果这篇博文对你有帮助,希望您可以打赏给博主余斗,以支持余斗继续坚持下去!

余斗个人博客打赏二维码

余斗余斗
  • 版权声明:原创文章由发表在Html/css分类下,2018-05-04最后更新,转载注明出处。

相关推荐

返回顶部