如何在x轴上显示半小时刻度

<div class="timeline">
  <div class="tick"></div>
  <div class="tick"></div>
  <div class="tick"></div>
  <div class="tick"></div>
  <div class="tick"></div>
  <div class="tick"></div>
</div>

.timeline {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  height: 20px;
  background-color: #f2f2f2;
}

.tick {
  position: relative;
  border-left: 1px solid #ccc;
}

.tick::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 1px;
  height: 10px;
  background-color: #ccc;
}

.tick:nth-child(2n)::before {
  height: 15px;
}

.tick:nth-child(3n)::before {
  height: 20px;
}

/* 设置刻度值的位置 */
.tick:nth-child(1) {
  grid-column: 1;
}

.tick:nth-child(2) {
  grid-column: 2;
}

.tick:nth-child(3) {
  grid-column: 3;
}

.tick:nth-child(4) {
  grid-column: 4;
}

.tick:nth-child(5) {
  grid-column: 5;
}

.tick:nth-child(6) {
  grid-column: 6;
}