Html5 - break line between "content" and the related class

Question

In order to design with html and css the following way to display numbers ( it's an image counter related to a caroussel )

I'm facing a problem which is putting a sort of line break in "content" so that the .down_numb (36) can be a little bit under the slash like a previous image.

This is my code:

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

Thanks everyone.

It's a little bit better, but i want more space between the .down_num and the slash. — alioua walid, Aug 25 '18 at 21:10

Johannes · Accepted Answer · 2018-08-25T21:23:22.793

I would apply display: inline-block; and position: relative to the inner DIVs (i.e. putting them into one line and using top settings to offset them from that line), apply position: absolute to the before element containing the / and adjust settings approximately as in my snippet:

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

Thank you for your answer and for the explanation as well. – alioua walid Aug 25 '18 at 21:27 — alioua walid, Aug 25 '18 at 21:27

score 0 · Answer 2 · answered Aug 25 '18 at 21:15

0

You can do it using pseudo elements. Simmilar issue is solved in this answer.

Thanks to transform: rotate(angle); you can rotate the line as you want and it doesn't interfere with other elements as it is essentially a part of the element you assign it to. You will still need to play with it for a bit though.

answered Aug 25 '18 at 21:15

martin k.

156
3
15

Followup, this answer may have been formed badly.. I know you are using pseudo elements already, but you don't need the content to be '/', that's what I'm saying.. – martin k. Aug 25 '18 at 21:22
If you want to go more in depth with pseudo elements and different shapes in css, see [this video](https://youtu.be/mNKz3devFAw) – martin k. Aug 25 '18 at 21:23

Html5 - break line between "content" and the related class

2 Answers2