Divyサイドナビゲーションにラベルを追加する

Question

WordpressとDivyテーマを使用してウェブサイトを設定しています。これは、コードを作成していない人に手渡す必要があるためです。

私の問題は、ホバー上のドットの左側に表示されるサイドナビゲーションバーにラベルを追加しようとしていることです。 Hereは、同じサイドナビゲーションバーを使用したウェブサイトの例です。

ナビゲーションバーの構造はこれです：

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 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> 

しかし、ラベルをドットの左側に表示する方法を理解することはできません。 私はこれらの線に沿って多くのことを試してみた：

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

しかし、任意の成功を持っていませんでした。これらのラベルをどのように入手するかについてのご意見は、非常に高く評価されます。助けてくれてありがとう！

UPDATE：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>