• 伪元素选择器 ( 重点 )

    伪元素选择器可以帮助我们利用CSS创建新标签元素， 而不需要 HTML 标签，从而简化结构

    ：：before           在元素内部的前面插入内容

    ：：after              在元素内部的后面插入内容

    before 和 after 创建一个元素， 但是属于行内元素

    新创建的这个元素在文档树中是找不到的， 所以我们称为 伪元素

    语法    element：：before { }

    before 和 after 必须有 content 属性

    before 在父元素内容的前面创建元素， after在父元素内容的后面插入元素

    伪元素选择器和标签选择器一样， 权重为1

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>伪元素选择器title>
    8.     <style>
    9.         div {
    10.             width: 200px;
    11.             height: 200px;
    12.             background-color: pink;
    13.         }
    14.         /* 权重是2 */
    15.         div::before {
    16.             /* 这个content是必须要写的 */
    17.             display: inline-block;
    18.             content: '我';
    19.             width: 30px;
    20.             height: 40px;
    21.             background-color: purple;
    22.         }
    23.         div::after {
    24.             content: '小猪佩奇';
    25.         }
    26.     style>
    27. head>
    28. <body>
    29.     <div>
    30.         是
    31.     div>
    32. body>
    33. html>

    伪元素选择器 配合字体图标

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>伪元素选择器使用场景-字体图标title>
    8.     <style>
    9.         @font-face {
    10.   font-family: 'icomoon';
    11.   src:  url('fonts/icomoon.eot?l8pdiz');
    12.   src:  url('fonts/icomoon.eot?l8pdiz#iefix') format('embedded-opentype'),
    13.     url('fonts/icomoon.ttf?l8pdiz') format('truetype'),
    14.     url('fonts/icomoon.woff?l8pdiz') format('woff'),
    15.     url('fonts/icomoon.svg?l8pdiz#icomoon') format('svg');
    16.   font-weight: normal;
    17.   font-style: normal;
    18.   font-display: block;
    19. }
    20.  
    21.         div {
    22.             position: relative;
    23.             width: 200px;
    24.             height: 35px;
    25.             border: 1px solid red;
    26.         }
    27.         div::after {
    28.             position: absolute;
    29.             top: 10px;
    30.             right: 10px;
    31.             font-family: 'icomoon';
    32.             /* content: ''; */
    33.             content: '\ea3e';
    34.             color: red;
    35.             font-size: 18px;
    36.         }
    37.     style>
    38. head>
    39. <body>
    40.     <div>div>
    41. body>
    42. html>

    仿土豆网显示隐藏遮罩系列

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>仿土豆网显示隐藏遮罩系列title>
    8.     <style>
    9.         .tudou {
    10.             /* 子绝父相 */
    11.             position: relative;
    12.             width: 444px;
    13.             height: 320px;
    14.             background-color: pink;
    15.             margin: 30px auto ;
    16.         }
    17.         .tudou img {
    18.             width: 100%;
    19.             height: 100%;
    20.         }
    21.         .tudou::before {
    22.             content: '';
    23.             /* 想隐藏又不占位置 用display */
    24.             /* 隐藏遮罩层 */
    25.             display: none;
    26.             position: absolute;
    27.             top: 0;
    28.             left: 0;
    29.             width: 100%;
    30.             height: 100%;
    31.             background: rgba(0, 0, 0, .3) url(arr.png) no-repeat center;
    32.         }
    33.         /* 当我们鼠标经过了 土豆这个盒子 ， 就让里面的before遮罩层显示出来 */
    34.         .tudou:hover::before {
    35.             /* 不是转化为块级元素 二十显示元素的意思 */
    36.             display: block;
    37.         }
    38.     style>
    39. head>
    40. <body>
    41.     <div class="tudou">
    42.         <img src="tudou.jpg" alt="">
    43.     div>
    44.     <div class="tudou">
    45.         <img src="tudou.jpg" alt="">
    46.     div>
    47.     <div class="tudou">
    48.         <img src="tudou.jpg" alt="">
    49.     div>
    50.     <div class="tudou">
    51.         <img src="tudou.jpg" alt="">
    52.     div>
    53.     <div class="tudou">
    54.         <img src="tudou.jpg" alt="">
    55.     div>
    56.     <div class="tudou">
    57.         <img src="tudou.jpg" alt="">
    58.     div>
    59.     <div class="tudou">
    60.         <img src="tudou.jpg" alt="">
    61.     div>
    62. body>
    63. html>

  • 相关阅读:
    css3 3d动画
    IB经济与商业可以一起选吗?
    Oracle数据库SQL优化详解
    【附源码】Python计算机毕业设计汽车出租平台
    计数排序详解
    下载Python的不同版本在同一台电脑上如何共存
    Python全栈开发【基础-09】深浅拷贝+while循环
    【Linux内核代码分析1】Linux时间子系统及HRTIMER实现
    MySQL(三)：表的增删改查(进阶)
    ThreadLocal（4）：ThreadLocal的核心方法源码
  • 原文地址：https://blog.csdn.net/MOUNTAIN_SEA1/article/details/126292424