圆滑的圆点显示'数字/按钮'

Question

.slick-dots {
  position: absolute;
  height: 50px;
  bottom: 0px;
  width: 100%;
  left: 0px;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
  text-align: center;
  font-size: 10;
}

.slick-dots li {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}

.slick-dots li a {
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 120px;
  height: 75px;
  display: block;
  visibility: hidden;
  border: 4px solid rgba(0, 0, 0, .50);
  margin-left: -60px;
  margin-bottom: 15px;
  -webkit-transition: visibility 0.5s linear 0.5s;
  transition: visibility 0.5s linear 0.5s;
  -webkit-animation: fadeOut 0.5s both;
  animation: fadeOut 0.5s both;
}

<div class="row">

  <div class="col-12 col-md-12 banner-section">
    <div class="slikslider3" style="clear: both">

      <div>
        <picture>
          <source media="(max-width: 900px)" srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/1200px-Google_Images_2015_logo.svg.png">
          <img src="https://content.fortune.com/wp-content/uploads/2017/01/google.jpeg" alt="banner" style="z-index:1" class="img-fluid">
        </picture>

      </div>


      <!-- 1st end -->
      <div>
        <picture>
          <source media="(max-width: 900px)" srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/1200px-Google_Images_2015_logo.svg.png">
          <img src="https://content.fortune.com/wp-content/uploads/2017/01/google.jpeg" alt="banner" style="z-index:1" class="img-fluid">
        </picture>
      </div>
    </div>
  </div>
</div>

但是不知何故，点显示的是数字而不是点，您知道怎么做吗？搜索所有方法/解决方案，但“数字”仍显示

我附上了HTML代码，以某种方式显示了数字而不是点。

Answer 1

希望对您有帮助。

.slick-dots li a.dot {
    font-size: 0;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    border: 1px solid #ddd;
}
.slick-active a.dot {
    background: red;
}