欢迎来到361模板(www.ke361.com),原创精品织梦模板提供商。 网站托管 桌面收藏 网站定制

361源码网

当前位置:361源码网 > 技术文档 > 程序代码 > CSS伪类before和after实现左右横线中间文字效果
这篇文章主要为大家详细介绍了CSS伪类before和after实现左右横线中间文字效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

首先我要了解清楚:

什么是: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>Ke361.Com</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上兼容有些问题

当然了,兼容性问题我们有很多的解决办法,这里361模板网就不再做累述了,有不懂的朋友可以联系在线客服帮助处理。

以上就是本文的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持361源码网。

感谢打赏,我们会为大家提供更多优质资源!

热词标签: css CSS伪类 左右横线

上一篇MYSQL数据库增加自增字段的方法介绍

下一篇【技巧】PHP、ASP、JS域名判断跳转

取消

感谢您的支持,我们会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by361模板网,分享从这里开始,精彩与您同在