Дизайн списка с помощью css

Question

Мне нужно добавить вот такой список удобств в квартире на сайт.

Пробовал использовать <ul>, но результат мне не понравился. Сейчас все выглядит как то так:

.facilitiesList {
  list-style: disc;
  color: black;
  font-family: "Roboto Light";
  color: black;
  font-size: 15px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 120px;
}

.facilities {
  font-family: "Roboto Light";
  font-size: 15px;
  height: auto;
  width: auto;
}

<div class="facilitiesList">
  <span class="facilities">900 sqf</span>
  <span class="facilities">elevator</span>
  <span class="facilities">smth else</span>
</div>

Как добавить точки, понятия не имею. Буду рад, если подскажете более удобный и простой способ решения данной задачи.

Answer 1

.facilitiesList {
  list-style: none;
  margin: 0;
}

.facilities {
  display: inline;
}

.facilities + .facilities:before {
  display: inline-block;
  content: '\25CF';
  margin: 0 1em;
  transform: scale(0.6);
}

<div class="facilitiesList">
  <span class="facilities">Kate Bush</span>
  <span class="facilities">Babooshka</span>
  <span class="facilities">Babooshka</span>
  <span class="facilities">Babooshka</span>
</div>

БЛОГ НА HUSL

Дизайн списка с помощью css

Ответы (1 шт):