Mir-Ismaili Mir-Ismaili - 11 months ago 62
CSS Question

Why overflow-y:hidden of HTML-lists makes bullet/number to be invisible?

I set

's CSS property
, then its bullet/number has been removed. Why? What is their relation? (How can I correct it?)

Here is a simple sample (With regard to @Paulie_D answer, I added

li:first-child {

<li>Unordered list - Item 1</li>
<li>Unordered list - Item 2</li>
<li>Ordered list - Item 1</li>
<li>Ordered list - Item 2</li>

I ran it on Firefox v49.x and Chrome v54.x.

Due to some answers, I explain:

enter image description here

Bullets/Numbers are outside of x-bounds, no y-bounds!

Answer Source

From my reading, when you set overflow-y:hidden the overflow-x computed value is set to auto which is part of the CSS Spec.

Computed value: as specified, except with visible computing to auto if one of overflow-x or overflow-y is not visible.

...and overflow:auto

This value indicates that the box’s content is clipped to the padding box.

..and since the marker is outside of the li it's clipped and so hidden.