您当前的位置:主页 > 教程合集 > Html/css > 网站首页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上兼容有些问题
关键字词CSS伪类beforeafter左右横线文字效果
余斗余斗
  1. 转载请注明:用CSS伪类before和after做左右横线中间文字效果
  2. 版权声明:本站原创文章,由发表在Html/css分类下,于2018-05-04最后更新
关于文本对齐格式text-align:justify的使用心得
CSS文字排版中标点符号在行首出现的解决方法
手机扫一扫 随身带着看
鸿运国际手机登录首页