导航栏的 CSS 内容计数器答案

【问题标题】：CSS content counter for nav bar导航栏的 CSS 内容计数器
【发布时间】：2020-10-01 09:27:05
【问题描述】：

我正在尝试在导航栏中使用计数器，但仅用于选定的项目。我不希望计数器显示子菜单项，只显示主要导航标题（主页、佣金、个人、信息、联系人）。现在，当计数器悬停在子菜单项上时，计数器位于我的 li 标题上方。

我已经为一些标题的位置放置了数字，因为客户还没有决定放什么。

我对编码还很陌生，但仍在尝试掌握 :before 和 :after 的概念。

body {
  min-height: 100vh;
  max-width: 100%;
  position: relative;
  background: #f4f3ee;
  font-size: 12px;
  line-height: 1.4em;
  color: #010101;
  counter-reset: counter;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 15vh;
  position: absolute;
  left: 0;
  padding: 2rem;
}


.nav-bar ul li:before {
  position: absolute;
  left: 13px;
  counter-increment: counter;
  content: "0" counter(counter);
  transform: translateY(7px);
  transition: opacity 0.2s ease-out, transform 0.1s ease-out;
}

.nav-bar ul li a:after {
  content: "";
  transition: opacity 0.1s ease-out;
}

.nav-bar ul li span:after {
  content: "";
  transition: opacity 0.1s ease-out;
}

.sub-menu {
  position: absolute;
  margin-left: 104px;
  margin-top: -23px;
}

a,
span.a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  text-transform: uppercase;
  line-height: 1.4rem;
  font-size: 14px;
}

.nav-bar li:hover .nav-links {
  display: block;
}

<nav class="nav-bar">
        <ul>
          <li>
            <a href="">Home</a>
          </li>
          <li>
            <span class="a">Commissions</span>
            <div class="sub-menu">
              <ul class="nav-links">
                <li><a href="">1</a></li>
                <li><a href="">2</a></li>
                <li><a href="">3</a></li>
                <li><a href="">4</a></li>
                <li><a href="">5</a></li>
                <li><a href="">6</a></li>
              </ul>
            </div>
          </li>
          <li>
            <span class="a">Personal</span>
            <div class="sub-menu">
              <ul class="nav-links">
                <li><a href="">1</a></li>
                <li><a href="">2</a></li>
                <li><a href="">3</a></li>
              </ul>
            </div>
          </li>
          <li>
            <span class="a">Info</span>
            <div class="sub-menu">
              <ul class="nav-links">
                <li><a href="">Clients</a></li>
                <li><a href="">About</a></li>
              </ul>
            </div>
          </li>
          <li><a href="">Contact</a></li>
        </ul>
      </nav>

【问题讨论】：

您是否尝试过仅使用普通列表编号。 ol { padding: 20px; list-style-type: decimal; } ol li { float: left; margin: 0 10px; padding: 0 10px; }
在上面的 CSS 中使用 <ol> 而不是 <ul>。将类应用于您不想显示数字的下拉项目。

标签： html css

【解决方案1】：

我相信这就是您所需要的。不知何故，您只需要选择“顶级”元素，但由于您的结构不允许这样做，我在顶级元素上添加了 a 类来定位它们。

body {
  min-height: 100vh;
  max-width: 100%;
  position: relative;
  background: #f4f3ee;
  font-size: 12px;
  line-height: 1.4em;
  color: #010101;
  counter-reset: counter;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 15vh;
  position: absolute;
  left: 0;
  padding: 2rem;
}

.a:before {
  position: absolute;
  left: 13px;
  counter-increment: counter;
  content: "0" counter(counter);
  transform: translateY(3px);
  transition: opacity 0.2s ease-out, transform 0.1s ease-out;
}

.nav-bar ul li:before {
  
}

.nav-bar ul li a:after {
  content: "";
  transition: opacity 0.1s ease-out;
}

.nav-bar ul li span:after {
  content: "";
  transition: opacity 0.1s ease-out;
}

.sub-menu {
  position: absolute;
  margin-left: 104px;
  margin-top: -23px;
}

a,
span.a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  text-transform: uppercase;
  line-height: 1.4rem;
  font-size: 14px;
}

.nav-bar li:hover .nav-links {
  display: block;
}

<nav class="nav-bar">
        <ul>
          <li>
            <a class="a" href="">Home</a>
          </li>
          <li>
            <span class="a">Commissions</span>
            <div class="sub-menu">
              <ul class="nav-links">
                <li><a href="">1</a></li>
                <li><a href="">2</a></li>
                <li><a href="">3</a></li>
                <li><a href="">4</a></li>
                <li><a href="">5</a></li>
                <li><a href="">6</a></li>
              </ul>
            </div>
          </li>
          <li>
            <span class="a">Personal</span>
            <div class="sub-menu">
              <ul class="nav-links">
                <li><a href="">1</a></li>
                <li><a href="">2</a></li>
                <li><a href="">3</a></li>
              </ul>
            </div>
          </li>
          <li>
            <span class="a">Info</span>
            <div class="sub-menu">
              <ul class="nav-links">
                <li><a href="">Clients</a></li>
                <li><a href="">About</a></li>
              </ul>
            </div>
          </li>
          <li><a class="a" href="">Contact</a></li>
        </ul>
      </nav>

【讨论】：