Question

我有以下情况。我正在构建一个为考试制作控制器的网络应用程序，以便您以后可以打印它们。

为了使用填充空格，我想使用<hr>元素来渲染线条，但每行必须附带相应的字母，如下所示：

一个-_____________

b -_____________

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

<hr>的当前CSS是：

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

Answer 1

检查这个小提琴。这是你需要的吗？

.question-line::before {
    content: "a-";
    margin-left: -10px;}

https://jsfiddle.net/bq5683bf/1/

Answer 2

您可以使用 Flexbox 将hr置于伪元素的底部，并将css计数器放置在字母的位置。

＆＃13;

body {
  counter-reset: hrCounter;                    
}
hr {
  width: 100px;
  border: none;
  border-bottom: 1px solid black;
  display: flex;
  align-items: flex-end;
  margin: 15px;
}
hr:before {
  counter-increment: hrCounter;                
  content: counter(hrCounter, lower-alpha) "-"; 
  transform: translateX(-100%);
}

＆＃13;

<hr>
<hr>
<hr>

＆＃13;

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

2 个答案: