求助：用HTML和CSS实现指定样式刻度尺 刻度数字位于线上方匹配示例

数字位置调整（实现数字在刻度线上方） #

你现有代码的刻度线默认从li顶部向上延伸，数字文本位于li内容区（刻度线下方），仅需调换刻度线延伸方向即可：

• 将伪元素before的顶部偏移定位改为底部偏移：把原有top: -.64em替换为bottom: -.64em，此时刻度线会从li的底边向下绘制，li内的数字自然处于刻度线上方。
• 同步调整li的外边距：原有margin: .64em -1em -.64em;是给向上延伸的刻度线预留顶部空间，现在刻度线向下延伸，直接改为margin: -.64em -1em .64em;，把预留空间挪到底部，避免上下内容重叠。
• 优化刻度线对齐精度：原有right: 1em的定位方式容易随容器宽度变动错位，替换为left: 50%并添加transform: translateX(-50%)，让刻度线绝对对齐数字的正下方，不会偏移。

刻度层级样式匹配（还原真实刻度尺观感） #

常规刻度尺的不同间隔刻度线长短、颜色有区分，不需要修改DOM结构，直接靠类选择器控制即可：

• 给整刻度（比如每1cm的刻度）的li加自定义类major，小刻度的li加类minor。
• 分别控制伪元素样式：
  • 小刻度（.minor）：设置height: .32em; border-left-color: #ddd;，做短浅的辅助刻度线
  • 整刻度（.major）：设置height: .64em; border-left-color: #999;，做深长的主刻度线，和真实刻度尺的分层逻辑一致

调整后的核心CSS参考 #

.ruler {
  list-style: none;
  display: flex;
  /* 禁止刻度换行，保证横向连续 */
  white-space: nowrap;
}
.ruler li {
  padding-left: 1cm;
  width: 2em;
  margin: -.64em -1em .64em;
  text-align: center;
  position: relative;
  text-shadow: 1px 1px hsl(60, 60%, 84%);
}
.ruler li:before {
  content: '';
  position: absolute;
  border-left: 1px solid #ccc;
  /* 刻度线从li底部向下延伸 */
  bottom: -.64em;
  left: 50%;
  transform: translateX(-50%);
}
/* 小刻度样式 */
.ruler li.minor:before {
  height: .32em;
  border-left-color: #ddd;
}
/* 整刻度样式 */
.ruler li.major:before {
  height: .64em;
  border-left-color: #999;
}

内容的提问来源于stack exchange，提问作者kimi1990mp