<header>
  <h1>CSS Conditional Layout</h1>
</header>

<main>
  <p>An application of conditional layouts based on content quantities using only CSS.</p>

  <h2>3 or Less</h2>
  <ul>
    <li>Hair: Harry Potter</li>
    <li>Makeup: Mark Zuckerberg</li>
    <li>Styling: Mary Poppins</li>
  </ul>

  <h2>4 or More</h2>
  <ul>
    <li>Hair: Harry Potter</li>
    <li>Makeup: Mark Zuckerberg</li>
    <li>Styling: Mary Poppins</li>
    <li>Accessories: Marie Claire</li>
  </ul>
</main>

body {
  text-align: center;
  font-family: monospace;
  font-size: 1.2rem;
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

ul {
  margin: 0 auto;
  border: 1px solid #9e8fdd;
  padding: 2rem;
  width: 500px;
  background-color: #f0edff;
}

li::before {
  content: '« ';
  display: inline;
}

li::after {
  content: ' »';
  display: inline;
}

li:first-child:nth-last-child(n + 4),
li:first-child:nth-last-child(n + 4) ~ li {
  display: inline;
}

li:first-child:nth-last-child(n + 4)::before,
li:first-child:nth-last-child(n + 4) ~ li::before,
li:first-child:nth-last-child(n + 4)::after,
li:first-child:nth-last-child(n + 4) ~ li::after {
  display: none;
}

li:first-child:nth-last-child(n + 4)::after,
li:first-child:nth-last-child(n + 4) ~ li:nth-last-child(n + 2)::after {
  content: ';';
  display: inline;
}