css3 伪元素

标签：

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

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

html:

<ul>
    <li>
        <div class="pure-g">
            <div class="pure-u-1-5 user-list-left">
                <span><img src="../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="../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中。这些元素不是真正的元素。因此，它们不是可用的。所以，不要使用伪元素生成内容，是您的网页的可用性和可访问性的关键。

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

参考文章有：

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

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

css3 伪元素

标签：

原文地址：http://www.cnblogs.com/fyking/p/4178262.html