zoukankan      html  css  js  c++  java
  • before与after的一些应用总结

    一、伪元素介绍

    css3为了区分伪类和伪元素,伪元素采用双冒号写法(单冒号也是可以使用的)

      常见伪类——:hover,:link,:active,:target,:not(),:focus(文本输入框聚焦)。

      常见伪元素——::first-letter,::first-line,::before,::after,::selection。

    :before和:after下特有的content,用于在css渲染中向元素逻辑上的头部或尾部添加内容。这些添加操作不会出现在DOM中,也不会改变文档内容,不可复制,仅仅是在css渲染的时候加入。

    所以不要用:before或:after展示有实际意义的内容,尽量使用它们显示修饰性内容。例如添加icon,图片,链接,背景遮罩等;

    这是添加一个背景色的效果  

    <style> div{ width:100px; height:60px; line-height:60px; text-align:center; border:1px solid #F00; position:relative; } div span div:before{ content:''; width:100px; height:60px; background:#F0F; opacity:0.5; position:absolute; top:0; left:0; display:none; } div:hover:before{ display:block; } </style> </head> <body> <div> <span>首页</span> </div> </body>

    二、content属性

    :before和:after必须配合content属性来使用,content用来定义插入的内容,content必须有值,至少是空。默认情况下,伪类元素的display是默认值inline,可以通过设置display:block来改变其显示。

    content可取以下值。

    1、string

    使用引号包一段字符串,将会向元素内容中添加字符串。如:p:after{content:"@@"}

    2、attr()

    通过attr()调用当前元素的属性,比如将图片alt提示文字或者链接的href地址显示出来。

    3、counter()

    调用计数器,可以不使用列表元素实现序号功能。

    4、attr()

    通过attr()调用当前元素的属性,比如将图片alt提示文字或者链接的href地址显示出来。

    清除浮动
    .clearfix:after{ content:""; display:block;clear:both;}
    11
  • 相关阅读:
    hdu2243 考研路茫茫——单词情结【AC自动机】【矩阵快速幂】
    poj3376 Finding Palindromes【exKMP】【Trie】
    hdu4763 Theme Section【next数组应用】
    hdu2609 How many【最小表示法】【Hash】
    hdu3374 String Problem【最小表示法】【exKMP】
    poj2728 Desert King【最优比率生成树】【Prim】【0/1分数规划】
    python装饰器
    python面试题
    salt教程1-理解saltstack
    redis慢查询日志
  • 原文地址:https://www.cnblogs.com/milx/p/6245888.html
Copyright © 2011-2022 走看看