CSS如何设置文本下方点下划线的自动长度

Answer 1

1. 如果您希望整行加下划线， 您需要为文本设置

width: 100%;

，以便将边框绘制到行尾。

.underline{
    width: 100%;
    border-bottom: 1px dashed #999;
}

<p class="underline">
  I come from USA
</p>

2. 如果您希望下划线从文本中间开始到行尾， 您可以使用

ul

和

li

并排放置文本的两个部分，然后使用

width: calc(100% - 100px);

来定位要添加下划线的文本部分。

100px

被减去是因为文本的第一部分没有下划线，因此如果文本的无下划线部分较长，则需要根据其宽度减去更大的部分。

.underline {
  width: calc(100% - 100px);
  border-bottom: 1px dashed #999;
}

ul {
  list-style-type: none;
  padding-left: 0; 
}

li p {
  display: inline-block;
}

<ul>
  <li>
    <p>
      I come from
    </p>
    <p class="underline">
      USA
    </p>
  </li>
</ul>