1.添加内容

　　

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>before和after的用法</title>
    <style type="text/css">
        p:before{content: 'hello';color: red;}
        p:after{content: "Tom";color: blue;}
    </style>
</head>
<body>
    <p>你好</p>
</body>
</html>

2.清除浮动

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>before和after的用法</title>
    <style type="text/css">
        ul{list-style: none;background: yellow;width:400px;}
        li{display: block;width:100px;height:100px;background: green;margin:20px;float:left;}
        ul:after{content: '';clear: both;display:block;width:0;height: 0;}
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

3.添加小三角

　　这个比较有趣，利用边框的绘制原理可以用CSS绘制出一个三角形，具体如下：

　　　　首先，创建一个block对象，让其宽和高都为0；

　　　　然后添加一个border，颜色填transparent(透明)；

　　　　然后添加任意一边的边框，比如border-left，并赋予颜色；

　　　　这时候就会将一个正方形沿着对角线切成四个三角形，因为只有左边的有颜色，所以只显示左边的部分，即一个向右的三角；

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>before和after的用法</title>
    <style type="text/css">
        div:after{
            content: '';
            display: inline-block;
            width:0;
            height:0;
            border: 8px solid transparent;
            border-left: 8px solid black;
            position: relative;
            top: 2px;
            left: 10px;
        }
    </style>
</head>
<body>
    <div>这是一个测试</div>
</body>
</html>

4.做对话框　　　　//利用第三点降到的做小三角的方法，可以实现类似于微信对话框之类的东西：

 

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>before和after的用法</title>
    <style type="text/css">
        section{width:300px;background: #eee;display: block;padding:10px;margin: 200px auto;}
        .left,.right{
            min-height: 40px;
            position: relative;
            display: table;
            text-align: center;
            border-radius: 7px;
            background: green;
        }
        .right{
            margin-top: 40px;
            float: right;
            padding: 0 10px;
        }
        .left:before,.right:after{
            content:'';
            display: block;
            width: 0;
            height:0;
            border: 8px solid transparent;
            position: absolute;
            top: 15px;
        }
        .left:before{
            border-right: 8px solid green;
            left:-16px;
        }
        .right:after{
            border-left: 8px solid green;
            right:-16px;
        }
        section:after{
            content: '';
            display: block;
            width:0;
            height: 0;
            clear: both;
        }
        .left{
            vertical-align: middle;
            padding: 0 10px;

        }
    </style>
</head>
<body>
    <section>
        <div class="left">
            <p>吃了吗？</p>
        </div>
        <div class="right">
            <p>吃过了，今天公司老板请客。</p>
        </div>
    </section>
</body>
</html>

4.如果要对对话框带表框，则需要同时用到：before和：after，一个放在底层，颜色为边框色，位置向外一个边框宽度，另一个在上层，用对话框背景色；

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>before和after的用法</title>
    <style type="text/css">
        section{width:300px;background: #eee;display: block;padding:10px;margin: 200px auto;z-index: -100;position: relative;}
        .left,.right{
            min-height: 40px;
            position: relative;
            display: table;
            text-align: center;
            border-radius: 7px;
            background: green;
            border:1px solid red;
            padding: 0 10px;
        }
        .right{
            margin-top: 40px;
            float: right;
        }
        .left:before,.right:after,.left:after,.right:before{
            content:'';
            display: block;
            width: 0;
            height:0;
            border: 8px solid transparent;
            position: absolute;
            top: 15px;
        }
        .left:before{
            border-right: 8px solid green;
            margin:0;
            padding:0;
            left:-16px;
        }
        .left:after{
            border-right:8px solid red;
            left:-17px;
            z-index: -1;
        }
        .right:after{
            border-left: 8px solid green;
            right:-16px;
        }
        .right:before{
            border-left:8px solid red;
            right: -17px;
            z-index: -1;
        }
        section:after{
            content: '';
            display: block;
            width:0;
            height: 0;
            clear: both;
        }
    </style>
</head>
<body>
    <section>
        <div class="left">
            <p>吃了吗？</p>
        </div>
        <div class="right">
            <p>吃过了，今天公司老板请客。</p>
        </div>
    </section>
</body>
</html>

 

原文参考自 

:after和:before的作用及使用方法

感谢前辈总结分享。