zoukankan      html  css  js  c++  java
  • 伪元素选择器

    标签(空格分隔): 伪元素


    介绍常用的伪元素:
    设置第一个首字母的样式:

    first-letter

    例如:

    p:first-letter {
      font-size: 48px;
    }
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>伪元素选择器</title>
        <style type="text/css">
            p:first-letter{
                color:red;
                font-size: 30px;
            }
    
    
        </style>
    </head>
    <body>
        <p>woshiyie duandua </p>
    
    
    </body>
    </html>
    

    before

    用于在元素的内容前面插入新内容。结合content使用,使用不是很频繁;

    p:before {
      content: "*";
      color: red;
    }
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>伪元素选择器</title>
        <style type="text/css">
            p:first-letter{
                color:red;
                font-size: 30px;
            }
            /*结合content使用,在。。。之前添加内容,使用不是很频繁*/
            p:before{
                content:'lll';
    
    
            }
    
    
        </style>
    </head>
    <body>
        <p>woshiyie duandua </p>
    
    
    </body>
    </html>
    

    after

    使用比较频繁,建议掌握;
    用于在元素的内容后面插入新内容。如下是在最后加入:&符号,代码如下

    
    p:after {
      content: "?";
      color: red;
    }
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>伪元素选择器</title>
        <style type="text/css">
            p:first-letter{
                color:red;
                font-size: 30px;
            }
            /*结合content使用,在。。。之前添加内容,使用不是很频繁*/
            p:before{
                content:'lll';
            }
            /*经常使用*/
            p:after{
                content:'&';
                color:red;
                font-size:20px;
            }
        </style>
    </head>
    <body>
        <p>woshiyie duandua </p>
    </body>
    </html>
    
  • 相关阅读:
    【笔记】二进制文件
    vs2015+64位win10系统ceres-solver编译
    python
    感受函数式编程-scala
    R语言diagram包画订单状态流图
    virtualbox下Centos6.5桥接模式上网配置方法
    配置对IIS上tabular的 HTTP 访问
    centos6.5下逻辑卷操作
    centos6.5下磁盘创建交换分区
    centos6.5下磁盘分区及挂载
  • 原文地址:https://www.cnblogs.com/surewing/p/10317474.html
Copyright © 2011-2022 走看看