Html5 - разрыв строки между «контентом» и связанным классом

Question

Чтобы создать с помощью html и css следующий способ отображения чисел (это счетчик изображений, связанный с каруселью)

I 'Я сталкиваюсь с проблемой, которая заключается в том, что в «контенте» ставится своего рода разрыв строки, так что .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, содержащему/ и настройте параметры примерно так, как в моем фрагменте:

#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;
}

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

Answer 2

Вы можете сделать это, используя псевдоэлементы .Simmilar проблема решена в этот ответ .

Благодаря transform: rotate(angle); вы можете вращать линию так, как вы хотите, и она не мешает другим элементам, поскольку по сути является частью элемента, которому вы ее назначаете.Вам все равно придется немного поиграть с ним.