如何在条形图底部的y轴添加值-css

Question

我将此作为我的练习代码工作： CodePen

我想在y轴的条形图底部添加$ 0。 i / e而不是从10,0000美元起，我想从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>

谢谢！

Answer 1

使用$ 0值添加另一个function array_flip2 (trans) { var key var tmpArr = {} for (key in trans) { if (!trans.hasOwnProperty(key)) { continue } tmpArr[trans[parseInt(key)]-1] = (key) } return tmpArr } ，并将边框指定为顶部而不是底部。然后，为您的.tick设置一个底部边框。

<强> CSS

#ticks

<强> HTML

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

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

<强> CodePen

仅编辑CSS

如果您无法访问HTML并希望仅在CSS中实现此功能，则可以使用<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

:before

<强> CodePen

<强>结果

Answer 2

既然你问过如何在CSS中这样做而不是添加另一个html元素，这里有一种方法可以使用CSS3伪：after元素。您可能希望根据需要调整右侧和顶部属性。

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