<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style type="text/css">
       /* 填写样式 */
       div::after{
        content:"";
        display:block;
        width:20px;
        height:20px;
        background-color:rgb(255,0,0);
       }
    </style>
</head>

<body>
  <div></div> 
    <script type="text/javascript">
        /* 填写JavaScript */
        
    </script>
</body>

</html>

::after 为添加后伪元素

::before 为添加前伪元素

两者都需要添加content:"";

伪元素是行内元素，设置宽高无效，必须要将其转换为块级元素即：display:block;