CSS伪类before，after制作左右横线中间文字效果

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .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: 25%;        /*调整背景横线的左右距离*/

        }

        h3.title span:after {

            right: 25%;

        }

    </style>

</head>

<body>

<div class="container">

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

    <div class="row">

        <img src="data:images/hz01.jpg" width="300" height="200">

    </div>

</div>

</body>

</html>

总结：

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

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

巴特西

CSS伪类before，after制作左右横线中间文字效果

最新文章

热门文章