html - <hr> html 元素之前的内容

Question

我有以下场景。我正在构建一个网络应用程序，它可以为考试制作 Controller ，以便您稍后可以打印它们。

为了使用填空，我想使用 <hr>元素来呈现线条，但是每行必须附有相应的字母，如下所示:

a-______________

b-_____________

等等等等。我的问题是如何设置 <hr> 的样式在实际行开始之前有内容。

<hr> 的当前 CSS这是:

.question-line{
    border-bottom: 1pt solid #333;
    margin-bottom: 25pt !important;
}

Answer 1

你可以用它们创建一行并将你的文本放在一个普通元素中。

.row {
  display: flex;
  align-items: flex-end;
  margin: 0 0 25px;
}

hr {
  margin: 0;
  padding: 0;
  border: solid #333;
  border-width: 0 0 1px;
  flex: 1 0 0;
}

<div class="row">
  <span>a-</span>
  <hr>
</div>

<div class="row">
  <span>b-</span>
  <hr>
</div>