技術標籤：初級CSS css 前端

偽元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>偽元素</title>
    <!-- <link rel="stylesheet" href="../chujicss/css/11.15.09.css"> --> 

    <style>
        p {
            font-size: 20px;
        }

        /* 
    偽元素，表示頁面中一些特殊的並不真實的存在的元素（特殊的位置）
       偽元素使用：：開頭

       ::first-letter 表示第一個字母
       ::first-line 表示第一行
       ::selection 表示選中的內容（滑鼠選中）
        ::before 元素的開始
        ::after 元素的最後
            -before和after必須結合content屬性來使用

       */ 

        p::first-letter {
            font-size: 50px;
        }

        p::first-line {
            background-color: orange;
        }

        p::selection {
            background-color: royalblue;
        }

        div::before {
            content: 'abc';
            color: blue;
        }

        div::after 
 {
            content: 'haha';
            color: blueviolet;
        }
    </style>
</head>

<body>
    <div>hello li jian bin</div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim reiciendis impedit repudiandae fugiat inventore,
        suscipit ab reprehenderit magni mollitia architecto dolorum necessitatibus non quasi nisi quas optio quisquam
        incidunt velit!</p>
</body>

</html>

執行結果為：
在這裡插入圖片描述

前端的學習之路：初級CSS---偽元素

偽元素

前端的學習之路：初級CSS---偽元素

前端的學習之路：初級CSS---使用after偽類解決高度塌陷問題

前端的學習之路：初級CSS---複合選擇器

前端的學習之路：初級CSS---clearfix

前端的學習之路：初級CSS---BFC的演示

前端的學習之路：初級CSS---字型的簡寫屬性

前端的學習之路：初級CSS---圖示字型的其他使用方式

前端的學習之路：初級CSS---字型族

前端的學習之路：初級CSS---元素的層級

前端的學習之路：初級CSS---絕對定位的佈局

前端的學習之路：初級CSS---背景練習

前端的學習之路：初級CSS---其他的文字樣式

前端的學習之路：初級CSS---選擇器的權重

前端的學習之路：初級CSS---繼承

前端的學習之路：初級CSS---關係選擇器

前端的學習之路：初級CSS---常用選擇器

前端的學習之路：初級CSS---css語法

前端的學習之路：初級CSS---顏色

前端的學習之路：初級CSS---單位：畫素和百分比

前端的學習之路：初級HTML---超連結

前端的學習之路：初級CSS---偽元素

偽元素

相關推薦