li::after  这样写只有一个圆圈出现是因为定位的问题，

 仔细去看下

.slider {
            position: absolute;
            width: 100%;
            text-align: center;
            z-index: 9999;
            bottom: 100px;
            }
            .slider li {
            display: inline-block;
            width: 170px;
            height: 130px;
            margin-right: 15px;
            }

这一段代码里面，li是没有定位的，即没有position，而以下：

.slider a {
            display: inline-block;
            width: 170px;
            padding-top: 70px;
            padding-bottom: 20px;
            position: relative;
            cursor: pointer;
            border: 2px solid #fff;
            border-radius: 5px;
            vertical-align: top;
            color: #fff;
            text-decoration: none;
            font-size: 22px;
            font-family: 'Yesteryear', cursive;
            text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.8),-2px -2px 1px rgba(0, 0, 0, 0.3),-3px -3px 1px rgba(0, 0, 0, 0.3);
            }

a标签是有position定位的。再看任务二：

 /*任务二、设置缩略图形状*/
                {
            content:"";
            display: block;
            height: 120px;
            width: 120px;
            border: 5px solid #fff;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            margin-left: -60px;
            z-index: 9999;
            top: -80px;
            }

这里的position：absolute；是要基于离它最近有定位属性的父元素定位的。

所以，如果按照你这样写，那么所有的 圆圈将都会以 .slide 进行定位，都只会基于一个点。

若是想要按照你写的实现效果，可以给 .slide li { position：relative}；即可。

.clearfix a::after有5个框  但是前面是clearfix他的子元素不应该是li?

因为a是li的儿子啊，缩略图是加在a的链接上的，如果加在li的后面不就是跟a没关系了？