Empty li using for style only; valid in HTML5?

Question

I want to make an ul that breakes into a few lines with flex-wrap. So far so good but, if there are multiple lines, I want all lines exept the last one to take the rest of the width of the line. So I used flex-grow: 1; on the li's. However as the last line shouldn't have flex-grow I just put an empty li after all the others an gave it flex-grow: 9999;, so that they don't take the whole width. (See Example for better understanding)

ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

li {
  flex-grow: 1;
}

li:last-of-type {
  flex-grow: 9999;
}

/* Unimportant */

ul {
  list-style-type: none;
  text-align: center;
  width: 400px;
}

li {
  padding: 0.5em;
  background: blue;
}

li:hover {
  background: red;
}

<ul>
  <li>abcdefghijklm</li>
  <li>abcdefghijklm</li>
  <li>abcdefghijklm</li>
  <li>abcdefghijklm</li>
  <li>abcdefghijklm</li>
  <li></li>
</ul>

Now, I have the question: Does HTML5 allow to just put an li at the end only for styling reasons?

(If there exists another CSS function for using flex-grow on these lines, I would be very happy, but I don't think so.)

---

I already searched for this, but I didn't realy know how to search, so I couldn't find something.

Answer 1

It's perfectly valid, but there may be a better way.

Instead off adding an extra DOM element to your code, you can use a CSS pseudo-element.

Pseudo-elements on flex containers are treated like flex items (MDN). The ::before element is the first item, and the ::after is the last.

Try this instead:

ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

li {
  flex-grow: 1;
}

ul::after {
  content: "";
  flex-grow: 9999;
}

/* Unimportant */
ul {
  list-style-type: none;
  text-align: center;
  width: 400px;
}

li {
  padding: 0.5em;
  background: aqua;
}

li:hover {
  background: red;
}

<ul>
  <li>abcdefghijklm</li>
  <li>abcdefghijklm</li>
  <li>abcdefghijklm</li>
  <li>abcdefghijklm</li>
  <li>abcdefghijklm</li>
</ul>

See these posts for more information and other options:

• Properly sizing and aligning the flex item(s) on the last row
• Targeting flex items on the last row

Answer 2

Michael_B's answer shows how the issue can be avoided. But addressing the question directly, this is about something that the HTML5 spec calls Palpable content. It says:

As a general rule, elements whose content model allows any flow content or phrasing content should have at least one node in its contents that is palpable content and that does not have the hidden attribute specified.

This requirement is not a hard requirement, however, as there are many cases where an element can be empty legitimately, for example when it is used as a placeholder which will later be filled in by a script, or when the element is part of a template and would on most pages be filled in but on some pages is not relevant.

So <li> elements should not be empty, but it is not invalid in itself if they are. However, to have the element just for styling is not an approved reason for it to be empty.