html - 将标签添加到 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;
}

但我不知道如何让标 checkout 现在点的左边。我在这些方面尝试了很多事情:

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>