Using an attribute to label a button/checkbox

Is it possible to display the value stored in an attribute as a label for a button that is really just a checkbox made to look like a button? <div class="efctog blueBackground section"> <input type="checkbox" name="attr_effect_checkbox" value="1" class="effect" title="@{effect_checkbox}"/> <span title="@{effect_name}></span> </div> input.sheet-effect { cursor: pointer; width: 54px; z-index: 1; height: 28px; opacity: 0;} input.sheet-effect + span::before { background-image: linear-gradient(to top left, #adbbff, #001a9c); /* blue */ color: white; width: 54px; content: attr(title); height: 28px; display: inline-block; margin-left: -56px; text-align: center; font-size: 14px; margin-top: 1px; font-weight: 600; padding-top: 8px;} input.sheet-effect:hover + span::before { background-image: linear-gradient(to top left, #ff69fa, #5c0959) !important; /* violet */ color: white !important;} input.sheet-effect:checked + span::before { color: black; background-image: linear-gradient(to top left, #fff65e, #948d13); /* yellow */} input.sheet-effect:active + span::before { background-image: linear-gradient(to top left, #ffffff, #bfbfbf) !important; /* white */ color: black !important;}

I'm not sure if I'm missing something about your question, or you are overthinking things. What do you mean by "label" here? If you just want a label next to the checkbox, you dont need all the CSS. Just put your span next to the checkbox, and give the span the attribute name, like <span name="attr_effect_name"></span> This is called an "attribute-backed span", and will show the attribute value inside the span. And delete all the span::before  CSS stuff.

My apologies.  I was not explaining myself very well. So, the span::before  CSS stuff is what makes the checkbox look like a button.  Here is the static label code: <div class="efctog blueBackground section"> <input type="checkbox" name="attr_effect_checkbox" value="1" class="effect" title="@{effect_checkbox}"/><span title="Toggle"></span> </div> With that code, the checkbox / button looks like this:  When selected, the checkbox / button looks like this:  Notice that the "Toggle" inside the span is serving as the label for the button.  I'd like to replace that with the string stored in attr_effect_name.  The change I made to accomplish that looks like this: <div class="efctog blueBackground section"> <input type="checkbox" name="attr_effect_checkbox" value="1" class="effect" title="@{effect_checkbox}"/><span name="attr_effect_name"></span> </div> When I make that change, the button looks like this:  The string stored in the attr_effect_name is currently "New Effect".  You can see that the text "New Effect" is displayed on the screen, but not over the button, and not in the same font or font color used for the static value of "Toggle". I'm not sure this is possible, but I thought I'd ask.

Ah, i should have realised. I'm not a CSS guru. I think  I have seen a solution for this before, but I can't remember. Hopefully someone will be along with a solution.

This is still an interesting question, but I've found an alternative.