The "list-style-type" style not working inside a :before pseudo-element in Chrome

Question

On current project, I've been using :before pseudo-elements to insert the bulletpoints for ul > li elements. That way, I can put padding on the li-elements themselves to nudge them to the right.

li {
    list-style-type: none;
    padding-left: 1.5rem;
}

li:before {
    content: "";
    position: relative;
    left: -1.5rem;
    width: 1.5rem;
    height: 1.6em;
    margin-bottom: -1.6em;
    display: list-item;
    list-style-position: inside;
    text-align: right;
    list-style-type: square;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

They look and work as they're supposed to on Firefox and Safari, adding square bulletpoints for each li-element.

On Chrome, however, the bullets are missing, with the space before the text simply being empty. Apparently, this is a bug with the newer versions of Chrome, as I could find here: The "list-style-type" style stopped working on the :before pseudo-element.

I have no idea, how to make the bullets show up in Chrome as well,, when using list-style-type on before-elements.

Does anyone know a fix or a workaround for this bug?

Answer 1

You don't need the pseudo-element to allow you to push the list items using padding. Set list-style-position: inside; on the list items.

li {
  padding-left: 1.5rem;
  list-style-position: inside;
  list-style-type: square;
}

/* outside example */
.outside li {
  list-style-position: outside;
}

<div>list-style-position: inside;</div>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

<div>list-style-position: outside;</div>
<ul class="outside">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>