css给选中的列表序号加背景色

Question

1、选中后给图片加边框时图片会有放大的感觉，不是直接加边框
2、选中后给序号加背景色

<div class="left">
            <ul class="">
              <li  v-for="index in 4" :key="index" :class="[index===imgListIndex?'active':'']" @click="setStyle(index)">
                <span></span>
                <img src="../../assets/tcone.png" >
              </li>
            </ul>
  </div>
-----------------
.active img{//选中后给图片加边框
                  border: 10px solid rgba(96, 196, 217, 1);
                }
ul{
              height: 350px;
              width: 284px;
              overflow-y:scroll;
              background-color: #23283B;
              margin-left: 50px;
              counter-reset: sectioncounter ;
              list-style: none;
              list-style-type: demical;
              li{
                width: 164px;
                height: 121px;
                opacity: 1;
                img{
                  width: 100%;
                  height: 100%;
                }
              }
      }//ul--end
 ul > li{
              position: relative;
              padding: 20px 35px;
            }
            ul > li:before{
              font-family: PingFang SC,serif;
              content:counter(sectioncounter);
              counter-increment: sectioncounter;
              position: absolute;
              font-size:16px;
              line-height:5px;
              top: 75px;
              left: 5px;
              text-align: center;
              // 给选中前的序号加背景色
                  // background:rgba(96, 196, 217, 1);
                  // width: 19px;
                  // height: 19px;
         }

Answer 1

ul > li.active{border: 10px solid rgba(96, 196, 217, 1);transform: scale(1.1)} //选中后给图片加边框时图片会有放大的感觉
ul > li.active span{background:#f00} //给文字加背景色