HTML & CSS How to make a horizontal line responsive and also add numbering at the end

[benjoe64]

I have created a horizontal line separator and I want it to be responsive. I also want to add numbering at the end which will change on bootstrap carousel changes.
View the codepen at

https://codepen.io/denkyira5544/pen/BaRKQNP

[CODE lang="html" title="Html"]<b style="display: inline-block; color: black; font-size: 24px; font-weight:bolder; font-family: conduit-regular; float: left;">My test&nbsp;&nbsp;</b>

<div class="drawLine"></div>
.drawLine {
display: inline-block;
width: 70vw;
position: relative;
top: 0.1em;
resize: both;
overflow: auto;
margin: 0 auto;
padding: 0 1px;
border: 1px solid lightblue;
}[/CODE]

 

[Malcolm]

Hey there!

I see that you want to make your horizontal separator responsive. With this, you can make it have a width of 100% and it will always try to keep the size 100% of the parent element.

As for the numbers, I'm not sure what you mean by this. Could you elaborate on this?

 

[benjoe64]

Hey there!

I see that you want to make your horizontal separator responsive. With this, you can make it have a width of 100% and it will always try to keep the size 100% of the parent element.

As for the numbers, I'm not sure what you mean by this. Could you elaborate on this?

Hi
Thanks for the response. It is working correctly now. I want to put numbering at the end of the separator which will change when a carousel changes. Basically counting the carousel you press the carousel next button then number 2 appears, etc