Is there a way to format a class element that also adds text?

[Jodie]

Hi All

I have a page that is really slow and one of the issues is the sheer number of times a very straight forward look up table is used to convert my 10-point scale into the text description.

In SAS programming I'd use a proc format statement at the start of my program and apply to all the variables when I set the dataset. I've created a class statement (with the world's ugliest color scheme ) that creates the bar charts, and at the moment a div runs a lookup to put the text. But I was wondering if there was a way to add the text in the html class so my div only calls the value from the table once and is formatted and labelled. Hopefully I'm making some sense. I've attached an image of the bars this creates

 

This is my class statement in header

.html1 {width: 10%; height: 18px; background-color: #feece2;}
.html2 {width: 20%; height: 18px; background-color: #f37134;}
.html3 {width: 30%; height: 18px; background-color: #ec561a;}
.html4 {width: 40%; height: 18px; background-color: #fcb38a;}
.html5 {width: 50%; height: 18px; background-color: #64a7e6;}
.html6 {width: 60%; height: 18px; background-color: #1d63c4;}
.html7 {width: 70%; height: 18px; background-color: #f9844f;}
.html8 {width: 80%; height: 18px; background-color: #92ca1d;}
.html9 {width: 90%; height: 18px; background-color: #5eae0e;}
.html10 {width: 100%; height: 18px; background-color: #f96814;}

 

And this is a sample of one of the divs calling for the bar

      <div class="skill html[@field:PW_tbl_profiles_tech6]">[@lookupfield:PW_tbl_profiles_tech6]</div>

 

 

[Jodie]

I worked this out - so now I no longer need to look up for every item, I can now use the CSS content - and the label is going exactly where I need! (Obviously I now need to code the label!)

.html1::after { 
  content: "This is 1";
}
.html2::after { 
  content: "This is 2";
}
.html3::after { 
  content: "This is 3";
}
.html4::after { 
  content: "This is 4";
}
.html5::after { 
  content: "This is 5";
}
.html6::after { 
  content: "This is 6";
}
.html7::after { 
  content: "This is 7";
}
.html8::after { 
  content: "This is 8";
}
.html9::after { 
  content: "This is 9";
}
.html10::after { 
  content: "This is 10";
}