伪元素对话气泡效果

CSS 中 :before 和 :after 选择器的用法

这次给大家带来的是对话气泡效果，主要是演示了 :before / :after 和 border 的用法，赶快来围观吧~

<!-- HTML代码片段 //-->
<div id="container">
	<!-- 大家好，我是Simple，^_^
    和高兴又和大家见面了，这次的代码回放是我准备已久的聊天对话气泡效果，
    课程中偶尔会有失误，请大家多多包容。 
    -->
    <!-- 好了，咱们认真对话一次吧 ~_~  -->
    <div class="all">
    <div>
      <div class="msgbox lf">
        <div class="head"></div>
        <div class="content">嗨，张总，你好啊，我现在正在写代码哦，你能看到吗？
看到请回话哦。</div>
      </div>
    </div>
      <div class="msgbox rf">
        <div class="content">哦，小王啊，早啊，我正在吃饭，你这么早就开始写代码了吗？
哎，看起来真是很认真的程序猿呢。</div>
        <div class="head"></div>
      </div>
    </div>
</div>
<!--
好了，到此结束了，不过代码中的结构思路貌似还是有点问题，相信大家都看到了，
大家有更好的解决办法的话，可以回帖告诉我哦！万分感谢 ^_^
-->

 

/*CSS代码片段*/
*{margin:0 auto;padding:0 auto;font-size:12px;}
.all{width:500px;box-shadow:0px 5px 25px #ccc;height:500px;overflow:hidden;}
.all .msgbox{width:500px;position:relative;height:auto;margin:15px 5px;}
.all .msgbox .head{background:url(
http://h.hiphotos.baidu.com/image/pic/item/7c1ed21b0ef41bd54a40316353da81cb39db3d12.jpg) 
no-repeat;height:100px;width:100px;border-radius:50px;display:inline-block;}
/*刚刚可以看到，对话气泡效果超出范围了，咱们设置一个最大宽度max-width
  行与行之间是不是太近了？别怕，咱们给个行高(line-height)就好了。
*/
.all .msgbox .content{padding:25px;border-radius:15px;
display:inline-block;line-height:25px;max-width:310px;
box-shadow:0px 5px 25px #ccc;position:absolute;}
.all .lf .content{margin-left:25px;}
.all .rf .content{right:125px;}
.all .rf .head{right:10px;position:absolute;}
/*好了，咱们现在来设置一下对话气泡指向效果(传说中的小三角形)*/
/*OK，现在我来解释一下CSS中的:before和:after选择器，
  :before：从字面意思就能看出来，意思是在xxx元素内容之前插入新的
内容(用content来，随便你插入什么，可以是字符串、数字、字母)。
  :after：意思是在xxx元素内容之后插入新的内容(content同上)
  
  对了，你们肯定有朋友会问三角符号怎么来的，哈哈，稍微聪明一点的朋友肯定能看懂，
我给了before和after 10个像素的边框宽度，然后让他们的边框颜色都透明，再单独给一
个边框颜色，就成为了小三角形。
  很有趣的哦，大家可以多去试试。
*/
.all .lf .content:before{content:" ";border:10px solid transparent;
border-right-color:#ccc;display:inline-block;position:absolute;left:-20px;top:35px;}
.all .rf .content:after{content:" ";border:10px solid transparent;
border-left-color:#ccc;display:inline-block;position:absolute;right:-21px;top:35px;}
 

 

 

.