If the `li` element is a flexbox, then the bullet will not show?

user_325418 0
Viewed 1069

If we have an unordered list, the default is that there are bullets:

<ul>
  <li>hello</li>
  <li>world</li>
</ul>

However, if we make it display: flex, the bullet doesn't show any more:

li { display: flex }
<ul>
  <li>hello</li>
  <li>world</li>
</ul>

Is there such a rule in CSS because it might be natural still to show the bullet but let

ul { list-style-type: none; }

to control whether to show the bullets.

flexbox css
1 Answers

Yes, you are right. With dislay:flex you are telling to ul that it's not display:list anymore. If you want bullets to be displayed with flex use pseudo element:

ul li:before {
    content: "";
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    border-radius: 50%;
    left: 0;
    margin-top: -7px; /* half bullet height */
    width: 14px;
    height: 14px;
    background: #000;
}
user_131994460
Related