HTML5-“内容”和相关类之间的分界线

Question

为了使用html和css设计，以下显示数字的方式（这是与卡罗素相关的图像计数器）

我遇到了一个问题，该问题是在“内容”中添加换行符，以使.down_numb（36）像前面的图像一样位于斜线下方。

这是我的代码：

#container{
    width: 150px;
    height: 150px;
    background-color :black;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}


/*Similar parameters between the 2 classes*/
.up_num , .down_num{
    position: absolute;
    font-size: 25px;
    
    width: 10px;
    height: 10px;
    color: white;
}

/*Position of up num*/
.up_num{
    top:20%;
    left: 45%;
}

/*Position of down num*/
.down_num{
    top:40%;
    left: 45%;
}

/*Pseudo class of down_num with content "/" */
.down_num:before{
    content : ' \002F ';
}

<div id="container">
        <div class="up_num">1</div>
        <div class="down_num">36</div>
</div>

谢谢大家。

Answer 1

我将display: inline-block;和position: relative应用于内部DIV（即，将它们放在一行中并使用top设置将其从该行偏移），应用position: absolute到包含before的{​​{1}}元素中，并大致按照我的代码段调整设置：

/

#container {
  width: 150px;
  height: 150px;
  background-color: black;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  box-sizing: border-box;
  padding-top: 34px;
  padding-left: 52px;
}

#container>div {
  display: inline-block;
  position: relative;
}
.up_num,
.down_num {
  font-size: 25px;
  color: white;
}
.up_num {
  top: 20%;
}
.down_num {
  top: 35%;
  left: 0.2em;
}
.down_num:before {
  content: ' \002F ';
  position: absolute;
  top: -30%;
  left: -0.3em;
}

Answer 2

您可以使用pseudo elements进行操作。 Simmilar问题已在this answer中解决。

由于transform: rotate(angle);，您可以根据需要旋转线，并且它不会干扰其他元素，因为它实际上是分配给它的元素的一部分。不过，您仍然需要玩一会儿。