• CSS 伪元素


    伪元素 ::before,::after

    1. 空元素(不能包含内容的元素)不支持 ::before,::after

    • IE 不支持的元素有:img,input,select,textarea。
    • FireFox 不支持的元素有:input,select,textarea。
    • Chrome 不支持的元素有:input[type=text],textarea。

    2. 必须设置 content 属性

    若不设置,则伪元素不会显示。如果不想设置 content 的内容,可以将内容设置为空。如:

    .a:before {
        content: '';
        display: block;
        width: 100px;
        height: 100px;
        background-color: red;
    }
    

    3. content 的属性值要遵循一些规则

    要遵循如下规则:

    • 如果 content 的值是常量,必须用单引号或双引号括起来。如:content:'abc'; , content:"abc";
    • 如果 content 的值是该元素的某个属性于常量组合而成的,常量仍然要用单引号或双引号括起来,之间不需要加号。如:content: '('attr(title)')';。感觉这种写法好违法直觉。

    若 content 的属性值不遵循如上要求,则伪元素不会显示。

    4. content 的属性值中如何设置特殊字符?

    如下表所示:

    特殊字符content 中这么写
    空格 content:"0a0";
    < content:"03c";
    > content:"03e";
    & content:"026";
    " content:"022";
    © content:"0a9";
    ® content:"0ae";
    × content:"0d7";

    更多见 这里

    伪元素 ::first-letter,::first-line

    1. 只对 displayblockinline-block 之类的块级元素有效。
    2. 对内容的开头是符号,或者第一个是英文字母或数字,第二个是符号的,使用 ::first-letter 来设置样式时,会对第一个字母和符号都生效。好违反直觉。

    相关文章

    .

  • 相关阅读:
    数据库如何部署上线阅读总结
    Nginx解决防盗链,服务器宕机,跨域,防DDOS
    跨域和表单重复提交
    Socet
    Redis发布订阅
    MySQL和Oracle的区别
    Redis事务、持久化、发布订阅
    Redis主从复制和哨兵模式
    Idea中使用Redis的Java客户端和Jedis
    Redis介绍及命令
  • 原文地址:https://www.cnblogs.com/jianxian/p/12321412.html
Copyright © 2020-2023  润新知