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>
    
  • 相关阅读:
    Ubuntu通过ADB连接手机
    MyRolan (快速启动小工具)
    关闭QQ右下角弹窗小程序
    day23作业-韩明琰
    day18-20作业-韩明琰
    day14-16作业-韩明琰
    java中对于多态的理解
    day11作业-韩明琰
    day10作业-韩明琰
    day09_作业
  • 原文地址:https://www.cnblogs.com/surewing/p/10317474.html
Copyright © 2011-2022 走看看