The use of display: flex in the li tag causes the li tag to lose its label

<style>
    .mid_content ul li{
        display: flex;
        justify-content: space-between;
}
</style>
 <div class="hide mid_content" name="情况交流">
     <ul>
        <li><a href="">全国海关党史学习教育总结会议在北京...</a><span>2022-08-25</span></li>
        <li><a href="">全国海关党史学习教育总结会议在北京...</a><span>2022-08-25</span></li>
        <li><a href="">全国海关党史学习教育总结会议在北京...</a><span>2022-08-25</span></li>
        <li><a href="">全国海关党史学习教育总结会议在北京...</a><span>2022-08-25</span></li>
        <li><a href="">全国海关党史学习教育总结会议在北京...</a><span>2022-08-25</span></li>
        <li><a href="">全国海关党史学习教育总结会议在北京...</a><span>2022-08-25</span></li>
     </ul>
   </div>

I set flex, the purpose is to align the a tag with the span tag left and right, give up using the float attribute, the alignment is successful but the front dot disappears, and I try to insert a div tag inside the li tag

 <div class="hide mid_content" name="情况交流">
      <ul>
        <li>
          <div class="mid_ul"><a href="">全国海关党史学习教育总结会议在北京...</a><span>2022-08-25</span></div>
        </li>
         <li>
            <div class="mid_ul"><a href="">全国海关党史学习教育总结会议在北京...</a><span>2022-08-25</span></div>
         </li>
         <li>
            <div class="mid_ul"><a href="">全国海关党史学习教育总结会议在北京...</a><span>2022-08-25</span></div>
         </li>
           <li>
              <div class="mid_ul"><a href="">全国海关党史学习教育总结会议在北京...</a><span>2022-08-25</span></div>
           </li>
            <li>
               <div class="mid_ul"><a href="">全国海关党史学习教育总结会议在北京...</a><span>2022-08-25</span></div>
            </li>
             <li>
               <div class="mid_ul"><a href="">全国海关党史学习教育总结会议在北京...</a><span>2022-08-25</span></div>
              </li>
             </ul>
    </div>

The result has not changed. I checked flex and found that the concept of flex model is wrong. display:flexNot on the item, but on the container block, it should be in <UL>, but I still want to use the flex property in my scenario, so I ended up using the ::before pseudo-class to draw the point myself

.mid ul li::before {
        content: "";
        position: absolute;
        border-radius: 50%;
        margin-top: 2.4rem;
        margin-left: -1rem;
        width: 0.4rem;
        height: 0.4rem;
        background: #005b9b;
    }
    

Also using an ordered list, use CSS Counter to simulate a decimal list. , place a :before pseudo-class on the list item. That way you have display: flex and your numbers are still there...

Even better, if you just want to style the numbers differently, you can do the same!!

.lst:before {
    counter-increment: section;
    content: counter(section) ".";
    position: absolute;
    margin-left: -20px;
}