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沒關系了？