伪元素

伪元素

伪元素表示页面中的一些特殊并不正式存在的元素（特殊位置）

伪元素使用 :: 开头

:: first-letter 表示首字母

::first-letter

 

::first-line 表示首行

::first-line

 

::selection 表示选中的内容

::selection

 

::before 表示元素的开始

::berfore

 

::after 表示元素的结尾

::after
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       /*
          伪元素，表示页面中的一些特殊的并不正式存在的元素（特殊位置）
          微元素使用 ::开头
​
          ::first-letter 表示第首字母（第一个词）
          ::first-line 表示第一行
          ::selection 表示选中的内容
​
          ::before 表示元素的开始
          ::after 表示元素的结尾
        */
        p::first-letter{
            font-size: 80px;
        }
        p::first-line{
            background-color: brown;
        }
        p::selection{
            background:darkgoldenrod;
        }
        div.ar::before{
            content:"<";
            color: darkgreen;
        }
        div::after{
            content: ">";
            color: darkgreen;
        }
   </style>
​
​
</head>
<body>
   <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dicta voluptatum illum labore voluptate expedita minus laborum illo sunt dignissimos, aliquid eum. Libero corrupti aspernatur veniam repellat quis amet, error ratione.
   </p>
   <br>
   <div class="ar">
      aoooooooooooooooooooooyeeeeeeeeeeeeeeeeeeeeeeee
   </div>
</body>

 

posted on 2020-05-27 23:08  厌红尘  阅读(242)  评论(0)    收藏  举报

导航