CSS Difficulty bar

[Plamenator]

So, hello everyone, my name is Plamen, I’m 18 from Bulgaria and in a quick change of subject, I’m need of your help. I’ve made a simple difficulty bar for a tutorial website which when hovered over must display the difficulty of the tutorial. But currently it’s level is fixed (just so I can show you the concept). I need it to be changed by the user e.g. When a user posts a new tutorial, he chooses a difficulty for it, lets say from 1 to 5 and if he chooses 1 then:

.diffbar:hover .difflvl {
right: 240px;
background: lightgreen;
}

…if he chooses 2 then:

.diffbar:hover .difflvl {
right: 180px;
background: green;
}

and so on, so I don’t have to adjust it manually… Something like an **if statement** e.g. in a perfect world- something like:

if inputdifficulty= 1 then
right: 180px;
background: green;
end if

So any advice will be appreciated. And please have in mind I’m not really experienced, so it might take some extra explaining. Thanks :)

Codepen: http://cdpn.io/yaxrJ

[Plamenator]

Wait… I got the codepen link wrong: http://codepen.io/Plamenator/pen/yaxrJ … Hope that’s the right link.

[yeeyang]

You want this as an entirely css? Could use :target, maybe…

[http://codepen.io/ahabion/pen/HejGz](http://codepen.io/ahabion/pen/HejGz “http://codepen.io/ahabion/pen/HejGz”)

[Author]

Posts