首页 > 其他 > 详细

::before和::after伪元素的使用

时间:2019-05-27 00:45:31      阅读:33      评论:0      收藏:0      [点我收藏+]

标签:-c   ear   ack   ring   {}   tex   ima   ext   info   

:before和:after伪元素在CSS中可以被用来添加元素、加小标、清浮动等。

基本用法:

p::before {} 
p::after {}

1、string

<style type="text/css">
p::before{
    content: "《";
    color: blue;
}
p::after{
    content: "》";
    color: blue;
}
</style>
<p>::before和::after伪元素的使用</p>

结果为:::before和::after伪元素的使用

2.attr()

调用当前元素的属性,可以方便的比如将图片的 Alt 提示文字或者链接的 href 地址显示出来。示例:

    <style type="text/css">
        a::after {
            content: "("attr(href) ")";
        }
    </style>
    <a href="www.baidu.com">百度</a>

结果为:

技术分享图片

3.清除浮动

  .clearfix:after {
    clear: both;
    display: block;
    content: "";
    visibility: hidden;
  }

 

::before和::after伪元素的使用

标签:-c   ear   ack   ring   {}   tex   ima   ext   info   

原文:https://www.cnblogs.com/lwming/p/10928367.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号