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>
    
  • 相关阅读:
    postgresql 2012 大会PPT下载 Joe
    Postgresql连接 Joe
    查看Postgresql的连接数 Joe
    greta使用
    CString GetFileDir(const CString& csFile)
    UnicodeToAnsi函数
    myeclipse优化方案
    bool CreatedMultipleDirectory( char* direct)
    LPWSTR GBK(LPCSTR plszUtf8, WCHAR* lpszGBK)
    真正整合资源的高手
  • 原文地址:https://www.cnblogs.com/surewing/p/10317474.html
Copyright © 2011-2022 走看看