リストブロックの項目間をコロンで整列表示するCSS（WordPress + SWELL）

<ul class="colon-align-list">
  <li><span class="label">WordPress</span><span class="value">6.9.1</span></li>
  <li><span class="label">SWELL</span><span class="value">2.16.0</span></li>
  <li><span class="label">PHP</span><span class="value">8.3.30</span></li>
</ul>

/* リストブロックの項目間をコロンで整列表示するCSS */
.colon-align-list {
  list-style: none; /* マーカー(ulタグの黒丸)を消す */
  padding: 0;
}

.colon-align-list li {
  display: flex; /* Flexboxスタイルを有効化 */
  margin-bottom: 5px; /* 項目間の余白 */
}

.colon-align-list .label {
  display: inline-flex;
  min-width: 120px; /* ラベルの幅 */
  font-weight: bold;
}

.colon-align-list .label::after {
  content: "：";
  margin-left: auto; /* コロンを右側に寄せる */
}

.colon-align-list .value {
  flex: 1; /* 利用可能なスペースを均等に分割 */
}