如何实现线条与文本基线对齐？border方式存在偏移问题

问题根源 #

你用border-bottom实现的线条位置偏下，是因为flex容器默认align-items: stretch，线条所在的div会被拉伸到和其他文本容器一样的高度，而border-bottom是贴在元素底部的，自然和文本基线不对齐。

方案一：快速调整对齐与边距 #

直接修改.line的样式，让它对齐文本基线，再微调边距让border落在基线位置：

.line {
  flex-grow: 1;
  align-self: baseline; /* 对齐文本基线 */
  border-bottom: 1px solid tomato;
  margin-bottom: 0.25em; /* 根据字体调整，让border刚好卡在基线 */
}

这种方式简单，但需要根据使用的字体微调margin-bottom的值。

方案二：伪元素精准控制线条位置 #

用伪元素实现线条，能更精准地定位到基线，不受元素高度影响：

.line {
  flex-grow: 1;
  align-self: baseline;
  position: relative;
}

.line::after {
  content: '';
  position: absolute;
  bottom: 0.15em; /* 针对Roboto Mono字体的基线位置，可微调 */
  left: 0;
  right: 0;
  height: 1px;
  background-color: tomato;
}

方案三：渐变背景实现线条 #

用线性渐变作为背景，写法更简洁：

.line {
  flex-grow: 1;
  align-self: baseline;
  height: 1em; /* 匹配文本行高 */
  background: linear-gradient(tomato, tomato) no-repeat bottom 0.15em left / 100% 1px;
}

完整示例代码 #

以下是基于方案二的完整可运行代码：

@import url('https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto:400,500,600&display=swap');

body, html {
  margin: 0; 
  padding: 0;
  font-family: 'Roboto mono', sans-serif;
}

.root {
  width: 100vw;
}

.container {
  color: black;
  display: flex;
  column-gap: 10px;
  width: 100%;
  font-size: 16px;
  align-items: baseline; /* 让所有子元素默认对齐基线，可省略.line的align-self */
}

.second-text {
  color: tomato;
}

.line {
  flex-grow: 1;
  position: relative;
}

.line::after {
  content: '';
  position: absolute;
  bottom: 0.15em;
  left: 0;
  right: 0;
  height: 1px;
  background-color: tomato;
}

<div class="root">
  <div class="container">
    <div>Etiam felis neque, suscipit aliquet elit</div>
    <div class="second-text">est quis</div>
    <div class="line"></div>
    <div>20.45</div>
  </div>
</div>

注意事项 #

• 如果给flex容器添加align-items: baseline，所有子元素都会自动对齐基线，此时.line的align-self: baseline可以省略。
• 伪元素的bottom值需要根据字体调整，不同字体的基线位置略有差异，比如Roboto Mono用0.15em刚好，其他字体可能需要0.1em或0.2em。

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