理解:before和:after的用法

详细参考http://www.cnblogs.com/cheerful-queen/p/4971484.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        blockquote{
            background-color: #ccc;
            color: #fff;
            height: 100px;
            width: 400px;
            text-align: center;
            line-height: 100px;
            /*line-height: 100px 用来设置鼠标点击的范围，
            没有这个值鼠标点击的范围就是字体所占用的那个范围，
            设置了这个鼠标点击的范围就会扩大*/
        }
        blockquote:hover:before{
            content: '啊啊啊啊哦';
            color: red;
        }

        blockquote:hover:after{
            content: '啊啊啊啊哦诶';
            color: green;
        }
    </style>
</head>
<body>
<blockquote>我是一个blockquote</blockquote>
</body>
</html>

鼠标没有移动到blockqoute上的时候：

鼠标移动到blockqoute上的时候：

 

posted @ 2017-04-18 09:54  发福大叔  阅读(390)  评论(0)  编辑  收藏  举报