selector: checked, disabled, enabled, after
We have 3 checkboxes here.
1. input type="checkbox"
2. input type="checkbox" disabled
3. input type="checkbox" checked
We use style, to outline them:
input:disabled { outline: 2px solid red;}
input:checked { outline: 2px solid green; }
We use span after checkboxes to add content:
input:disabled + span:after {content: " nicht auswählbar"}
input:enabled + span:after {content: " auswählbar"}
input:checked + span:after {content: " ausgewählt"}
You can check or uncheck checkboxes to see changes!