<div class="container">
  <ul class="inline-list">
      <li><a href="/en">English</a></li>
      <li><a href="/fr">Français</a></li>
      <li><a href="/da">Dansk</a></li>
      <li><a href="/it">Italiano</a></li>
      <li><a href="/ja">日本語</a></li>
  </ul>
</div>

<p>Resize the block above to see this in action!</p>

<p>PS: Wear a mask when you go outside.</p>
/*
    1: Not essential but good to do to if your list lives alongside other content
    2: If you don't have a reset in place, this will remove the user-agent stylesheet default padding
    3: This is required to ensure all items flow next to each other
    4: The whitespace required for this trick to work — no other character should be used, as this trick is making whitespace characters collapse when wrapping to a new line
    5: Setting a larger letter-spacing effectively provides a wider whitespace
    6: Apply a background image to fake any kind of bullet or pipe character, or any other separator you can think of
*/

.inline-list {
    display: inline-block; /* 1 */
    padding: 0; /* 2 */
    line-height: 2em;
    text-align: center;
}

.inline-list > li {
    display: inline; /* 3 */
}

.inline-list > li::after {
    content: " "; /* 4 */
    letter-spacing: 1em; /* 5 */
    background: linear-gradient(90deg, transparent calc(50% - 0.03125em), currentColor 0, currentColor calc(50% + 0.03125em), transparent 0); /* 6 */
}

/* Presentation styles */
html {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

body {
  color: #efefef;
  background: #0c0c0c;
}

a {
  color: hotpink;
}

.container {
  width: 12rem;
  margin: 0 auto;
  
  resize: horizontal;
  overflow: auto;
}

p {
  text-align: center;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.