今天切图的时候给了一个列表，属于常见的列表，图片如下

这样的列表属于比较常见的列表了，在pc端上实现如下：

html:<ul>    <li>        <div class="pure-g">            <div class="pure-u-1-5 user-list-left">                <span><img src="http://www.mamicode.com/img" ></span>            </div>            <div class="pure-u-4-5 user-list-right">                <div class="user-list-right-l">                    <p>                        <span class="user-name">king</span>                        <span class="user-sex-age">25</span>                    </p>                    <p>                        <span class="user-intro">烘焙爱好者</span>                    </p>                </div>                <div class="user-list-right-r user-relation-status">                </div>            </div>        </div>    </li></ul>在mobile实现出来的结果不尽如人意，因为 user-list-left中的图片会随着窗口的变大变小而高度也有变化。为了保证 user-list-right 中的文字总是能够垂直居中，搜索过好多，发现实现的垂直居中都是相对于父元素高度固定的做到的。所以这种方法不能满足要求了。

在小伙伴的帮助下实现了几个版本可以做到文字垂直居中了。

<ul class="warp">    <li>       <img src="http://www.mamicode.com/images/PlumbCenter.jpg" />       <div class="user-list-right">            <p>                <span class="user-name">king</span>                <span class="user-sex-age">25</span>            </p>            <p>                <span class="user-intro">烘焙爱好者</span>            </p>       </div>    </li></ul>css:li{list-style: none;margin:5px;}.wrap{width:60%;margin:0 auto;}.wrap li{font-size: 0;}/*去display:block空隙*/.wrap li img{display: inline-block;vertical-align: middle;width:20%;}.wrap .user-list-right{font-size:12px;word-break:break-all;word-wrap:break-word;display: inline-block;width:80%;vertical-align: middle;text-align: center;}.demoWrap li div p{line-height:24px;}

这种简化了文档结构，对img 和 user-list-right都采用了vertical-align: middle; 这下确实图片和文字都垂直居中了。不过发下了个问题就是user-list-right如果写border-bottom的话，会造成border-bottom靠上，而不是在li的底部。

小伙伴继续优化，给出了一种解决方案：

<ul class="warp">    <li>       <img src="http://www.mamicode.com/images/PlumbCenter.jpg" />       <div class="user-list-right">            <p>                <span class="user-name">king</span>                <span class="user-sex-age">25</span>            </p>            <p>                <span class="user-intro">烘焙爱好者</span>            </p>       </div>    </li></ul>css:li{list-style: none;margin:5px;}.wrap{width:60%;margin:0 auto;}.wrap li{position:relative;font-size: 0;}/*去display:block空隙*/.wrap li img{display: inline-block;vertical-align: middle;width:20%;}.wrap .user-list-right{font-size:12px;word-break:break-all;word-wrap:break-word;display: inline-block;width:80%;vertical-align: middle;text-align: center;}.demoWrap li div p{line-height:24px;}wrap li:after{        content:"";        width: 80%;        border-bottom: 1px solid red;        display: block;        position: absolute;        right: 0;        bottom: 0;}

这种方案对li使用了position：relative，而对li：after进行处理，重写了宽度，采用绝对定位，完美的解决了页面在缩放中img变大变小的列表文字不居中的问题。

解决这个问题，学会了两点，尽量少些dom元素。使用伪元素。

伪元素的使用：:first-letter :first-line :before :after

前面两个就不多说了，后面两个已经被大侠们玩坏了额，快点来学习学习

使用伪元素::before,::after

使用伪元素到底能做啥，来让你打开眼界吧，给你贴些那些大神们的例子吧。

1 使用before和after做出来的对话框，总算可以不用图片了http://nicolasgallagher.com/pure-css-speech-bubbles/demo/

看该实例时候注意三角形的方向，都是采用border去实现的，挺有意思的，下来我准备单独写个文章出来。

2 透明漸變的按鈕 http://jsfiddle.net/chriscoyier/hk6z9/1/

3 CSS GUI iconshttp://nicolasgallagher.com/pure-css-gui-icons/

4 最常用的就是清除浮动了

/*clear float*/.clear::before, .clear::after {    content: "";    display: table;}.clear::after {    clear: both;}.clear {    zoom:1; /*IE6, IE7*/}

5 用偽元素作 tooltip

<style>.tooltip a {position: relative;}.tooltip a::before {    border-left: 10px solid transparent;    border-right: 10px solid transparent;    border-top: 10px solid #abcdef;    position: absolute;    left: 0%;    bottom: 90%;    content: "";    height: 0;    width: 0;    opacity: 0;    margin:0 0 20px 15px;    transition: all 0.4s ease;}.tooltip a::after {    border-radius: 5px;    background: #abcdef;    color: #000;    position: absolute;    left: 0%;    bottom: 130%;    content: attr(data-tooltip);    white-space: nowrap;    padding: 5px 15px;    margin-bottom: 15px;    opacity: 0;    transition: all 0.4s ease;}.tooltip a:hover::before {bottom: 65%;}.tooltip a:hover::after {bottom: 90%;}.tooltip a:hover::after, .tooltip a:hover::before {opacity: 1;}</style><p class="tooltip">

上面这些知识抛砖引玉，下来自己就好好学习吧。

伪元素注意内容：

看了这么多的伪元素好处，看看它的兼容性吧，兼容性这个是硬伤。

浏览器支持:before 和 :after 伪元素栈，像这样：Chrome 2+,Firefox 3.5+ (3.0 had partial support),Safari 1.3+,Opera 9.2+,IE8+ (with some minor bugs),几乎所有的移动浏览器。

伪元素不是决定性的 幸运的是，缺少伪元素不会造成大问题。大多数情况下，伪元素一般修饰（或者帮助）内容，不会给不支持的浏览器造成问题。所以，如果你的支持者具有较高的IE版本，你仍然可以在某种程度上使用它们。

一些提醒 正如前面提到的，伪元素不会出现在DOM中。这些元素不是真正的元素。因此，它们不是可用的。所以，不要使用伪元素生成内容，是您的网页的可用性和可访问性的关键。

另外一件需要记住的是，开发工具，例如火狐，不要用伪元素显示内容。所以，如果使用了，伪元素会造成难以维护和调试缓慢。

参考文章有：

1 http://blog.mukispace.com/pseudo-elements-10-examples/

2 http://blog.jobbole.com/49301/

css3 伪元素