html - How to add a value in the y-axis at the bottom of a bar chart-css -

i'm using exercise code work: codepen

i want add $0 @ bottom of bar chart in y-axis. i/e instead of starting $10,0000 want start $0. there way in css?

html y-axis:

<div id="ticks"> <div class="tick" style="height: 59px;"><p>$50,000</p></div> <div class="tick" style="height: 59px;"><p>$40,000</p></div> <div class="tick" style="height: 59px;"><p>$30,000</p></div> <div class="tick" style="height: 59px;"><p>$20,000</p></div> <div class="tick" style="height: 59px;"><p>$10,000</p></div> </div> 

thanks!

add .tick $0 value, , assign border top instead of bottom. then, give #ticks bottom border.

css

#ticks .tick {   border-top: 1px solid #c4c4c4; */ change top /* }  #ticks {   border-bottom: 1px solid #c4c4c4; */ add bottom border /* } 

html

<div id="ticks">   <div class="tick" style="height: 59px;"><p>$50,000</p></div>   <div class="tick" style="height: 59px;"><p>$40,000</p></div>   <div class="tick" style="height: 59px;"><p>$30,000</p></div>   <div class="tick" style="height: 59px;"><p>$20,000</p></div>   <div class="tick" style="height: 59px;"><p>$10,000</p></div>   <div class="tick" style="height: 59px;"><p>$0</p></div> </div> 

codepen

---

edit css only

if not have access html , achieve in css only, can use :before.

css

#ticks .tick:last-child:before {   content: '$0';   position: absolute;   left: -5em;    bottom: -5px;   margin: 0 0 0 0.5em; } 

codepen

---

result