1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>before 和 after</title>
  7.     <style>
  8.     .wrapper * {
  9.         box-sizing: border-box;
  10.     }
  12.     .wrapper>div {
  13.         height: 250px;
  14.         width: 250px;
  15.         border: 1px solid #ccc;
  16.         background: #000;
  17.         margin: 10px;
  18.         float: left;
  19.         color: #D9D9D9;
  20.         padding: 30px;
  21.         text-align: center;
  22.     }
  23.     /*基础用法1*/
  25.     .base1:before {
  26.         content: "我是::before";
  27.         color: #FB0D0D;
  28.     }
  30.     .base1:after {
  31.         content: "我是::after";
  32.         color: #f70;
  33.     }
  34.     /*基础用法2*/
  36.     .base2:before {
  37.         content: '\ABCD\ABCD\ABCD\ABCD';
  38.         white-space: pre;
  39.         color: #FB0D0D;
  40.     }
  42.     .base2:after {
  43.         content: '\609\609\609\609\609';
  44.         white-space: pre;
  45.         color: #f70;
  46.     }
  47.     /*::before , ::after添加背景图*/
  49.     .base3:before {
  50.         content: url(icon-plus.png);
  51.     }
  53.     .base3:after {
  54.         content: url(icon-plus.png);
  55.     }
  56.     /*取自定义属性*/
  58.     .base4:before {
  59.         content: attr(title);
  60.         color: #E8E3AA;
  61.     }
  63.     .base4:after {
  64.         content: attr(data-test);
  65.         color: #D8CF23;
  66.     }
  67.     /*小试身手合集*/
  69.     .base5,
  70.     .base6,
  71.     .base7,
  72.     .base8 {
  73.         position: relative;
  74.     }
  75.     /*小试身手1*/
  77.     .base5:before {
  78.         content: "";
  79.         display: block;
  80.         position: absolute;
  81.         top: 0;
  82.         left: 0;
  83.         height: 50px;
  84.         width: 50px;
  85.         border-top: 5px solid #f70;
  86.         border-left: 5px solid #f70;
  87.     }
  89.     .base5:after {
  90.         content: "";
  91.         display: block;
  92.         position: absolute;
  93.         right: 0;
  94.         bottom: 0;
  95.         height: 50px;
  96.         width: 50px;
  97.         border-right: 5px solid #f70;
  98.         border-bottom: 5px solid #f70;
  99.     }
  100.     /*小试身手2*/
  102.     .base6:before {
  103.         content: "";
  104.         display: block;
  105.         position: absolute;
  106.         left: 0;
  107.         top: 0;
  108.         width: 100%;
  109.         height: 100%;
  110.         background: -webkit-linear-gradient(45deg, rgba(75, 65, 45, .3), rgba(123, 456, 789, .3), rgba(854, 183, 729, .3));
  111.         background: linear-gradient(45deg, rgba(75, 65, 45, .3), rgba(123, 456, 789, .3), rgba(854, 183, 729, .3));
  112.         z-index: 1;
  113.     }
  115.     .base6:after {
  116.         content: "";
  117.         display: block;
  118.         position: absolute;
  119.         bottom: 0;
  120.         right: 0;
  121.         width: 100%;
  122.         height: 100%;
  123.         background: -webkit-linear-gradient(-45deg, rgba(50, 125, 55, .7), rgba(55, 3, 45, .5), rgba(99, 12, 3, .8));
  124.         background: linear-gradient(-45deg, rgba(50, 125, 55, .7), rgba(55, 3, 45, .5), rgba(99, 12, 3, .8));
  125.         z-index: 1;
  126.     }
  127.     /*小试身手3*/
  129.     .base7:before {
  130.         content: "";
  131.         display: block;
  132.         position: absolute;
  133.         width: 50px;
  134.         height: 50px;
  135.         -webkit-animation: circle 2s ease-in-out infinite;
  136.         -moz-animation: circle 2s ease-in-out infinite;
  137.         -ms-animation: circle 2s ease-in-out infinite;
  138.         -o-animation: circle 2s ease-in-out infinite;
  139.         animation: circle 2s ease-in-out infinite;
  140.         background: #C3172C;
  141.     }
  143.     .base7:after {
  144.         content: "";
  145.         display: block;
  146.         position: absolute;
  147.         content: "";
  148.         background: #14965E;
  149.         display: block;
  150.         position: absolute;
  151.         width: 50px;
  152.         height: 50px;
  153.         -webkit-animation: circle 2s ease-in-out infinite;
  154.         -moz-animation: circle 2s ease-in-out infinite;
  155.         -ms-animation: circle 2s ease-in-out infinite;
  156.         -o-animation: circle 2s ease-in-out infinite;
  157.         animation: circle 2s ease-in-out infinite;
  158.     }
  159.     /*小试身手4*/
  161.     .base8:before {
  162.         content: "1";
  163.         display: block;
  164.         position: absolute;
  165.         height: 100%;
  166.         width: 10px;
  167.         background: #6F0ECF;
  168.         left: 0;
  169.         top: 0;
  170.         margin-left: -10px;
  171.     }
  173.     .base8:hover:before {
  174.         background: #9F81DE;
  175.         -webkit-transform: rotate(-90deg) translate(-30%, 30%);
  176.         transform: rotate(-90deg) translate(-30%, 30%);
  177.         -webkit-transition: all 2s ease-in;
  178.         transition: all 2s ease-in;
  179.     }
  181.     .base8:after {
  182.         content: ".";
  183.         display: block;
  184.         position: absolute;
  185.         height: 100%;
  186.         width: 10px;
  187.         background: #6F0ECF;
  188.         right: 0;
  189.         bottom: 0;
  190.         margin-right: -10px;
  191.     }
  193.     .base8:hover:after {
  194.         background: #9F81DE;
  195.         -webkit-transform: rotate(-90deg) translate(-30%, 30%);
  196.         transform: rotate(-90deg) translate(-30%, 30%);
  197.         -webkit-transition: all 2s ease-in;
  198.         transition: all 2s ease-in;
  199.     }
  201.     @-webkit-keyframes circle {
  202.         from {
  203.             border-radius: 0%;
  204.             top: 0;
  205.         }
  206.         35% {
  207.             background: #2B2FDC;
  208.             left: 30%;
  209.             top: 50%;
  210.         }
  211.         75% {
  212.             background: #AB9E9E;
  213.             right: 0;
  214.             bottom: 20%;
  215.         }
  216.         to {
  217.             border-radius: 100%;
  218.             top: 250px;
  219.             left: 15%;
  220.             bottom: 50%;
  221.         }
  222.     }
  224.     @-moz-keyframes circle {
  225.         from {
  226.             border-radius: 0%;
  227.             top: 0;
  228.         }
  229.         35% {
  230.             background: #2B2FDC;
  231.             left: 30%;
  232.             top: 50%;
  233.         }
  234.         75% {
  235.             background: #AB9E9E;
  236.             right: 0;
  237.             bottom: 20%;
  238.         }
  239.         to {
  240.             border-radius: 100%;
  241.             top: 250px;
  242.             left: 15%;
  243.             bottom: 50%;
  244.         }
  245.     }
  247.     @keyframes circle {
  248.         from {
  249.             border-radius: 0%;
  250.             top: 0;
  251.         }
  252.         35% {
  253.             background: #2B2FDC;
  254.             left: 30%;
  255.             top: 50%;
  256.         }
  257.         75% {
  258.             background: #AB9E9E;
  259.             right: 0;
  260.             bottom: 20%;
  261.         }
  262.         to {
  263.             border-radius: 100%;
  264.             top: 250px;
  265.             left: 15%;
  266.             bottom: 50%;
  267.         }
  268.     }
  269.     </style>
  270. </head>
  272. <body>
  273.     <div class="wrapper">
  274.         <div class="base1">添加文字</div>
  275.     </div>
  276.     <div class="wrapper">
  277.         <div class="base2">添加unicode文字,图标的需要特殊字体库[font-face引入webfont,内部的unicode编码]</div>
  278.     </div>
  279.     <div class="wrapper">
  280.         <div class="base3">添加背景图,但是不如用background好控制</div>
  281.     </div>
  282.     <div class="wrapper">
  283.         <div class="base4" title="呵呵哒,萌萌哒" data-test="我是HTML5自定义属性">取自定义属性,取值不带双引号!!</div>
  284.     </div>
  285.     <div class="wrapper">
  286.         <div class="base5">小试身手1:框框</div>
  287.     </div>
  288.     <div class="wrapper">
  289.         <div class="base6">小试身手2:渐变</div>
  290.     </div>
  291.     <div class="wrapper">
  292.         <div class="base7">小试身手3:变形</div>
  293.     </div>
  294.     <div class="wrapper">
  295.         <div class="base8">小试身手4:追加</div>
  296.     </div>
  297. </body>
  299. </html>

W3C的解释用一句话概括：单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。

基础理论

::before和::after 是用来给元素添加额外内容的,因为只存在于作用元素内容的前后
::before和::after 内部的content支持以下三种特性!

  • 字符串[“可以是符号什么的也可以是单纯的字符” ,支持unicode编码!!]
  • 属性[attr() , 可以获取标签上的元素属性,比如data-*的自定义属性,title,alt这些]
  • 引用媒体文件[url ,可以链接图片作为背景图什么的]
  • 计数器[counter()]

image.png