How to make a content property in css use php

Tags: php,html,css,arrays

Problem :

So I take from an array some informations for a barlike chart I made. Here is the CSS:

<style>
.outer,
.inner,
.target {
  height: 14px;
  margin-bottom: 5px;
}
.outer {
  background-color: #cccccc;
  width: 80%;
  margin: 20px auto;
  position: relative;
  font-size: 10px;
  line-height: 14px;
  font-family: sans-serif;
}
.inner {
  background-color: green;
  position: absolute;
  z-index: 1;
  text-align: right;
  border-right: 2px solid black;
}
.inner:after {
  content: '$avg_width';
  display: inline-block;
  left: 10px;
  position: relative;
  height: 100%;
  top: -14px;
}
.target {
  background-color: transparent;
  width: 19px;
  position: absolute;
  z-index: 2;
  color: black;
  text-align: right;
  border-right: 2px dotted black;
}
.target:after {
  content: 'Target: $target_width';
  display: inline-block;
  left: 28px;
  position: relative;
  height: 100%;
  top: 14px;
}
.solid_line {
  color: black;
  float: right;
  width: 3px;
  border-right: 3px solid black;
  height: 16px;

}
</style>

Here is the php:

<?php

    $target = number_format((float)$data->data[2][32][3], 2, '.', '');
    $array = [];
    $sum = 0;
    $path = $data->data[2];
    $bar_width = '200px'; 
    foreach($path as $key => $item){
        if($key > 1 && isset($item[5])){ 
            $array[] = (int)$item[5];
            $sum += (int)$item[5];
        }
    }
    $avg = ($sum / count($array));
    $base   = max($target, $avg);
    $target_width = $bar_width / 100 * ($target / $base * 100);
    $avg_width = $bar_width / 100 * ($avg / $base * 100);
    $percent = $avg / $target;                       
?>

And here is the HTML:

<div class="outer"> 
    <div class="target">
    </div>                   
    <div class="inner">
    </div>
</div>

As you can see I try to make use of the content property in css and to use php within it, but for some reason it does not display the results.

---

Solution :

That's because you're accessing PHP variable directly in CSS. HTML/CSS are executed client side where as PHP executes on client side.

So you need to echo the PHP variable inside your on page CSS. Like this:

.inner:after {
  content: '<?php echo $avg_width ?>';

Above echo code will execute on server side and give value to client side CSS to render the element properly.

Make sure You're using it on ON PAGE/INLINE CSS, this won't work on external .CSS files.