作家
登录

理解伪元素 :before 和 :after

作者: 来源: 2017-08-08 17:27:58 阅读次 我要评论

: 30px; 
  •  
  •   
  •  
  • } 
  •  
  • blockquote:after { 
  •  
  • content: close-quote; 
  •  
  • font-size: 24pt; 
  •  
  • text-align: center; 
  •  
  • line-height: 42px; 
  •  
  • color: #fff; 
  •  
  • background: #ddd; 
  •  
  • float: right; 
  •  
  • position: relative; 
  •  
  • bottom: 40px; 
  •  
  • }  
  • 指定伪元素尺寸

    因为已经设置float,所以无需设置display:black。

    1. blockquote:before { 
    2.  
    3. content: open-quote; 
    4.  
    5. font-size: 24pt; 
    6.  
    7. text-align: center; 
    8.  
    9. line-height: 42px; 
    10.  
    11. color: #fff; 
    12.  
    13. background: #ddd; 
    14.  
    15. float: left; 
    16.  
    17. position: relative; 
    18.  
    19. top: 30px; 
    20.  
    21. border-radius: 25px; 
    22.  
    23. height: 25px; 
    24.  
    25. width: 25px; 
    26.  
    27. } 
    28.  
    29. blockquote:after { 
    30.  
    31. content: close-quote; 
    32.  
    33. font-size: 24pt; 
    34.  
    35. text-align: center; 
    36.  
    37. line-height: 42px; 
    38.  
    39. color: #fff; 
    40.  
    41. background: #ddd; 
    42.  
    43. float: right; 
    44.  
    45. position: relative; 
    46.  
    47. bottom: 40px; 
    48.  
    49. border-radius: 25px; 
    50.  
    51. height: 25px; 
    52.  
    53. width: 25px; 
    54.  
    55. }  

    接洽关系背景图像

    我们也可声调换用图片调换内容而不是只有纯文本。尽管content属性供给了 url()来插入图片, 然则在更多的实例中,我更偏向于应用背景(background)属性大年夜而更好的┞菲握图片。


        推荐阅读

        EPS应急电源的应用常见问题合集

      EPS的全称为紧急电力供给,其肩负着在电力不足的间谍作况下供给备用电力的义务。与UPS电源不合,EPS应急电源并>>>详细阅读


      本文标题:理解伪元素 :before 和 :after

      地址:http://www.17bianji.com/lsqh/36606.html

    关键词: 探索发现

    乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

    网友点评
    自媒体专栏

    评论

    热度

    精彩导读
    栏目ID=71的表不存在(操作类型=0)