univasity / 微信小程序 / CSS 巧用 :before和:after

分享

   

CSS 巧用 :before和:after

2017-01-18  univasity

CSS 巧用 :before和:after

CSS中有两个特别值得重视的伪元素,它们是::before,:after。然而,我们不仅要知道它们是如何使用的,还要知道如何巧用它们。

什么是:before和:after?该如何使用他们

:before是css中的一种伪元素,可用于在某个元素之前插入某些内容。

:after是css中的一种伪元素,可用于在某个元素之后插入某些内容。

通过一个简单例子来熟悉一下他们的使用:

<p>"ello Worl"</p>

<style>

p:before{

    content:"H";

}

p:after{

    content:"d";

}

</style>

好了,上面代码,估计大家都知道输出什么结果,对的,“Hello World”。p标签内部的内容的前面会被插入一个:before伪元素,该伪元素内包含的内容是"H";而在p标签内的内容后面会被插入一个:after伪元素,该元素包含的内容是"d"。作为一只合格的程序猴子,捍卫"Hello World"的完整存在是必要的。下在我们来看看如何巧用它们,通过展示两个例子就明白了。

实例一:如何写个语音框样式?

CSS将元素宽和高设为0,用设置border的大小来实现三角图形,听过吧?呵呵,估计大伙都这么干过吧,下面我就用这种方式来实现图形。

 <div class="test-div"></div>


是的,能过两伪元素,建立两个三边透明一边有颜色的形状,本质上是一个三角形状,然后能过定位实现我们所要的效果。

结果是这样的:


总结一下:赞。

实例二:实现一个内容的半透明背景层

比如我们的需求是做一个半透明的登录框。怎么实现,先思考几秒,......。

时间到,看代码:



亲爱的,看懂了吗? 没错,很简单,before元素做成了一个背景而存在。背景是透明的,通过z-index将他放在元素的下面。

结果是这样的:


总结一下:赞赞!!!

伪元素的应用实质,只要牢牢记住,定义结构和内容,定位置,分层次显示。今后碰到其它类似的问题也就很轻松搞定了。

思考比勤奋更重要。

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多
    喜欢该文的人也喜欢 更多

    ×
    ×

    ¥.00

    微信或支付宝扫码支付:

    开通即同意《个图VIP服务协议》

    全部>>