To create a design using html and css to display numbers in an image counter related to a carousel, follow these steps:
https://i.stack.imgur.com/OBAHd.png
I'm encountering an issue where I need to add a line break in the "content" so that the .down_num (36) is positioned slightly below the slash similar to the previous image.
This is my current code snippet:
#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>Appreciate any assistance or guidance on this matter. Thank you!