Html 如何在条形图底部的y轴上添加值

我将此用作我的练习代码工作：

我想在y轴条形图底部添加$0。i/e不是从100000美元开始，而是从0美元开始。在CSS中有什么方法可以做到这一点吗

y轴的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>

50000美元

40000美元

30000美元

20000美元

10000美元

---

谢谢

添加另一个

。用$0值勾选
，并将边框指定给顶部而不是底部。然后，给你的
#勾号
下边框

CSS

#ticks .tick {
  border-top: 1px solid #C4C4C4; */ Change to top /*
}

#ticks {
  border-bottom: 1px solid #C4C4C4; */ Add bottom border /*
}

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

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>



结果

既然您询问了如何在CSS中执行此操作，而不是添加另一个html元素，那么下面是一种使用CSS3 pseudo:after元素执行此操作的方法。您可能需要根据需要调整右侧和顶部属性

#q1:after {
   content:"$0";
   position:relative;
   color:#000;
   right:85px;
   top:285px;
 }