One-line adaptive reference list-2

index.html

<div class="raz"><a href="#">Красота</a><span><a href="#">Волосы</a><a href="#">Лицо</a><a href="#">Макияж</a><a href="#">Тело</a><a href="#">Косметология</a><a href="#">Диеты</a><a href="#">Фитнес</a></span></div>

one-line-adaptive-reference-list-2.markdown

One-line adaptive reference list-2

A Pen by Beibit Sakhanov on CodePen.

License.

style.css

.raz {
  padding: 0 .4em;
  line-height: 1em;
  box-sizing: border-box;
  background-image: linear-gradient(transparent 1.5em, currentColor 1.5em, currentColor calc(1.5em + 1px), transparent calc(1.5em + 1px));
}
.raz a {
  text-decoration: none;
  vertical-align: middle;
  background: #fff;
}
.raz > a {
  display: inline-block;
  margin: .5em .2em;  /* .4em / 2 = .2em, поскольку font-size: 2em; */
  padding: 0 .15em;  /* .3em / 2 = .15em, поскольку font-size: 2em; */
  font-size: 2em;
}
.raz span {
  display: inline-block;
  padding-bottom: 1em;
}
.raz span a {
  display: inline-block;  /* текстовые ссылки, неразделённые пробелом, смещаются вниз при переполнении */
  margin: 0 .4em;
  padding: 0 .3em;
}