主页 / 问题 / 1206791
Accepted
realHikkan
Asked:2021-11-19 17:16:00 +0000 UTC2021-11-19 17:16:00 +0000 UTC

如何在 li 元素上制作数字“计数器”

  • 772

我不能像布局中那样向 li 元素添加数字

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  margin: 0px;
}

a {
  text-decoration: none;
  color: #fff;
}

ul {
  padding-left: 0px;
  display: flex;
}

li {
  list-style-type: none;
}

hr {
  border: none;
  color: #eeeeee;
  background-color: #eeeeee;
  height: 1px;
}

.side-news-header-title {
  text-align: center;
  font-size: 14px;
  text-transform: uppercase;
}

.side-news-header-title::after {
  content: "";
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 66px;
  height: 3px;
  background-color: #e1d9bd;
  margin-top: 12px;
  margin-bottom: 29px;
}

.side-themes {
  margin-top: 55px;
}

.theme {
  color: #000;
  font-size: 14px;
  font-weight: 700;
  padding-bottom: 10px;
}

.themes {
  display: block;
}
<div class="side-themes">
  <div class="side-news-header">
    <h3 class="side-news-header-title">Темы</h3>
  </div>

  <ul class="themes">
    <li><a class="theme" href="#">Красота</a></li>
    <hr>
    <li><a class="theme" href="#">Здоровье</a></li>
    <hr>
    <li><a class="theme" href="#">Образ жизни</a></li>
    <hr>
    <li><a class="theme" href="#">Музыка</a></li>
    <hr>
    <li><a class="theme" href="#">Спорт</a></li>
    <hr>
    <li><a class="theme" href="#">Йога</a></li>
    <hr>
  </ul>
</div>

在此处输入图像描述

html

1 个回答

  1. Best Answer

    例如，您可以使用标签sup：

    @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  margin: 0px;
}

a {
  text-decoration: none;
  color: #fff;
}

ul {
  padding-left: 0px;
  display: flex;
}

li {
  list-style-type: none;
}

hr {
  border: none;
  color: #eeeeee;
  background-color: #eeeeee;
  height: 1px;
}

.side-news-header-title {
  text-align: center;
  font-size: 14px;
  text-transform: uppercase;
}

.side-news-header-title::after {
  content: "";
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 66px;
  height: 3px;
  background-color: #e1d9bd;
  margin-top: 12px;
  margin-bottom: 29px;
}

.side-themes {
  margin-top: 55px;
}

.theme {
  color: #000;
  font-size: 14px;
  font-weight: 700;
  padding-bottom: 10px;
}

.themes {
  display: block;
}

sup {
  color: #e1d9bd;
}
    <div class="side-themes">
  <div class="side-news-header">
    <h3 class="side-news-header-title">Темы</h3>
  </div>

  <ul class="themes">
    <li><a class="theme" href="#">Красота <sup>12</sup></a></li>
    <hr>
    <li><a class="theme" href="#">Здоровье <sup>4</sup></a></li>
    <hr>
    <li><a class="theme" href="#">Образ жизни <sup>145</sup></a></li>
    <hr>
    <li><a class="theme" href="#">Музыка <sup>28</sup></a></li>
    <hr>
    <li><a class="theme" href="#">Спорт <sup>62</sup></a></li>
    <hr>
    <li><a class="theme" href="#">Йога <sup>8</sup></a></li>
    <hr>
  </ul>
</div>

    • 1

相关问题