为 Divy 侧导航添加标签

Question

我正在使用 wordpress 和 Divy 主题建立一个网站，因为我需要在完成后将它交给不编码的人。

我的问题是我正在尝试将标签添加到出现在悬停点左侧的侧导航栏中。 Here 是一个示例网站，它与我正在使用的侧边导航栏相同。

导航栏的结构是这样的：

<ul class="et_pb_side_nav et-visible" style="margin-top: -100px;">
     <li class="side_nav_item">
       <a href="#" id="side_nav_item_id_0" class>0</a>
     </li>
     <li class="side_nav_item"><a href="#" id="side_nav_item_id_1" class="">1</a>
     </li>
     <li>
     etc...
     </li>

我已经设法在悬停时加厚条形并将点（a 元素）保持在同一位置：

ul.et_pb_side_nav:hover {
   width: 100px;
}
ul.et_pb_side_nav:hover .side_nav_item a {
   margin-left: 60px;
   margin-right: 0px;
}

但我不知道如何让标签出现在点的左侧。 我在这些方面尝试了很多事情：

ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_0:before{
  content: “About Us”;
  position: absolute !important;
  top: 0;
}

但是没有任何成功。任何关于如何获得这些标签的想法将不胜感激。感谢您的帮助！

更新：This person 设法用标签替换了这些点，但仍然没有弄清楚如何保留这些点并且只在悬停时显示这些标签，尽管它帮助我更接近了。

Answer 1

你想要这样的东西吗？

ul {
  position: absolute;
  right: 100px;
  height: 100%;
  width: 100px;
  top: 0px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
ul li.et_pb_side_nav {
  list-style: none;
  text-align: right;
}
ul li.et_pb_side_nav:after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.8);
  display:inline-block;
}
ul li.et_pb_side_nav a {
  font-size:0px;
  transition:all 180ms ease-in;
}
ul li.et_pb_side_nav:hover a {
  font-size:14px;
}

<ul>
  <li class="et_pb_side_nav"><a href="#">First</a>
  </li>
  <li class="et_pb_side_nav"><a href="#">Second</a>
  </li>
  <li class="et_pb_side_nav"><a href="#">Third</a>
  </li>
</ul>