css3 伪元素
今天切图的时候给了一个列表，属于常见的列表，图片如下
这样的列表属于比较常见的列表了，在pc端上实现如下：
html:
<ul>
<li>
<div class="pure-g">
<div class="pure-u-1-5 user-list-left">
<span><img src="../img" alt=""></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="../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="../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中。这些元素不是真正的元素。因此，它们不是可用的。所以，不要使用伪元素生成内容，是您的网页的可用性和可访问性的关键。
另外一件需要记住的是，开发工具，例如火狐，不要用伪元素显示内容。所以，如果使用了，伪元素会造成难以维护和调试缓慢。
参考文章有：
