伪元素：：after和：：before-CSDN博客

本文链接：https://blog.csdn.net/depers15/article/details/51746287

CSS伪元素::after用来匹配已选中元素的一个虚拟的最后子元素.通常会配合content属性来为该元素添加装饰内容.这个虚拟元素默认是行内元素.

::after表示法是在CSS 3中引入的,::符号是用来区分伪类和伪元素的.支持CSS3的浏览器同时也都支持CSS2中引入的表示法:after.
用法如上代码：
有兴趣的话可以copy下来在浏览器上看一下；
语法：
::after{content:"..."} 将你想要添加在元素后面的内容添加到content内；
::after{content:attr(data-descr)} 如下代码的第三个例子一样；
::after{content:url("...logo.png");} 引入媒体文件；
::after{content: counter(li);} 计数器： – 在列表时计算行数非常方便，这我们会在后面更补一篇文章;
::after{content: "";}  空 – 可以用于清除左右浮动元素，也能够用于使用背景图片(这是可以设置高和                           宽，甚至使用background-size。)，这个我也会更补一篇文章;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css::before and css::after</title>
    <style>
        .exciting-text::after {
          content: "<- 让人兴兴兴奋!"; 
          color: green;
        }

        .boring-text::after {
           content:    "<- 无聊!";
           color:      red;
        }


        .ribbon {
          background-color: #5BC8F7;
        }

        .ribbon::after {
          content: "看这是橙色盒子";
          background-color: #FFBA10;
          border-color: black;
          border-style: dotted;
        }


        span[data-descr] {
          position: relative;
          text-decoration: underline;
          color: #00F;
          cursor: help;
        }

        span[data-descr]:hover::after {
          content: attr(data-descr);
          position: absolute;
          left: 0;
          top: 24px;
          min-width: 200px;
          border: 1px #aaaaaa solid;
          border-radius: 10px;
          background-color: #ffffcc;
          padding: 12px;
          color: #000000;
          font-size: 14px;
          z-index: 1;
        }
    </style>
</head>
<body>
    <!-- 简单用法： -->
    <p class="boring-text">这是些无聊的文字</p>
    <p>这是不无聊也不有趣的文字</p>
    <p class="exciting-text">在MDN上做贡献简单又轻松。
    按右上角的编辑按钮添加新示例或改进旧示例！</p>
    <br>
    <br>
    <br>
    <br>
<!--    装饰用法：我们可以为content属性设置任何样式； -->
    <span class="ribbon">注意橙色盒子的位置。</span>
    <br>
    <br>
    <br>
    <br>
    <!-- 提示用法： -->
    <p>这是上面代码的实现<br />
      我们有一些 <span data-descr="collection of words and punctuation">文字</span> 有一些
      <span data-descr="small popups which also hide again">提示</span>。<br />
      把鼠标放上去<span data-descr="not to be taken literally">看看</span>.
    </p>
</body>
</html>