Adding text to the end of an object bar on bar chart

[teravolt]

https://codepen.io/team/css-tricks/pen/b46b85162c40677686cc4080baea8d02

This is the example I’m going to use for my questionnaire results. I’m not experienced with CSS and can’t for the life of me figure out how to append text that sits exactly at the end of the bar like this:

https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTRkX9vehnYZm71h-QnCS-QyhmGTGbRJzJDUcNT4iPDZTMXAnUL

Any ideas? Thanks in advance.

[renbletz]

Well, I can’t fork the linked codepen, but I’ll try to explain the changes I made to achieve the effect you’re looking for.

I’ll warn you though, it’s pretty hacky. This is because the bars are an “After” pseudoelement on the overall percentage grid, precluding the ability to add anything after them through normal means.

Instead, we have to add a new HTML span element and position it with position: absolute, using the for loop at the bottom to position it correctly. Also, doing this requires that the “dd” element be marked as position: relative, which throws off the existing styling – the percentage and text were both positioned relative to the table itself, not individual cells (“position” tags will position themselves based on the closest explicitly-positioned parent element).

So yeah… the result works, but getting there is a bit of a hack.

Also, I don’t want to just copy-paste a private codepen over into a public one to get around the “you can’t fork this” restriction, so I’m going to describe the changes I made step-by-step. Hopefully that’s okay…

Anyhow!

First, you’ll need to add the new HTML span elements after the existing “text” span elements, inside of each percentage dd element.

So, first row, for example, will look like this.

  <dd class="percentage percentage-11">
    <span class="text">IE 11: 11.33%</span>
    <span class="after-text">Text</span>
  </dd>

Each row should have that new span, with the same class, after-text.

Next, we dive into the CSS and adjust it so that dd is using position:relative.

First, add a new selector and styling for the dd element.

dd {
  position: relative;
}

Next, adjust the .text elements with the following adjustments:

.text {
...  
  position: absolute;
  left: -140px;
...
}

Following that, we’ll add a selector and styling for the after-text class.

.after-text {
  position: absolute;
  display: inline-block;
  top: 34%;
  z-index: 2;
  text-transform: initial;
}

The z-index: 2 allows it to actually display on top of the percentage grid, the top: 34% positions it (at least on my window) correctly vertically, and the (optional) text-transform: initial overrides the auto-capitalization coming from the .percentage class.

Finally, we’ll need to add the following to the for loop at the bottom of the CSS, which positions the after-text after the bar.

@for $i from 1 through 100 {
  .percentage-#{$i} {
    &:after {
      ..
    }
    .after-text {
      $aftervalue: ($i * 1% + 1%);
      left: $aftervalue;
    }

Hope this helps!

[Author]

Posts