how to add on off text to existing toggle switch

Question

I want to insert an ON/OFF text to my toggle switch. When the slider is switched on 'ON' text should be displayed and when the slider is off, 'OFF' text should be displayed. They should be displayed inside the toggle. Please help.

 .cm-toggle { -webkit-appearance: none; -webkit-tap-highlight-color: transparent; position: relative; border: 0; outline: 0; } .cm-toggle:after { content: ''; width: 35px; height: 20px; display: inline-block; background: rgba(196, 195, 195, 0.55); border-radius: 18px; clear: both; } .cm-toggle:before { content: ''; width: 18px; height: 18px; display: block; position: absolute; left: 0; top: 0px; border-radius: 50%; background: rgb(255, 255, 255); box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); } .cm-toggle:checked:before { left: 20px; box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.6); } .cm-toggle:checked:after { background: #3895D3; }

 <input class='cm-toggle' type='checkbox' checked>

Answer 1

You can do it this way:

 .cm-toggle { -webkit-appearance: none; -webkit-tap-highlight-color: transparent; position: relative; border: 0; outline: 0; } .cm-toggle:after { content: ''; width: 35px; height: 20px; display: inline-block; background: rgba(196, 195, 195, 0.55); border-radius: 18px; clear: both; } .cm-toggle:before { content: 'off'; width: 18px; height: 18px; display: flex; justify-content: center; align-items: center; font-size: 10px; position: absolute; left: 0; top: 0px; border-radius: 50%; background: rgb(255, 255, 255); box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); transition: all 0.2s ease-in-out; } .cm-toggle:checked:before { left: 20px; box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.6); content: 'on'; } .cm-toggle:checked:after { background: #3895D3; }

 <input class='cm-toggle' type='checkbox' checked>

Answer 2

Add this

 .cm-toggle { -webkit-appearance: none; -webkit-tap-highlight-color: transparent; position: relative; border: 0; outline: 0; } .cm-toggle:after { content: ''; width: 35px; height: 20px; display: inline-block; background: rgba(196, 195, 195, 0.55); border-radius: 18px; clear: both; } .cm-toggle:before { /* Modification */ content: 'OFF'; text-indent: 38px; /* END */ vertical-align: middle; width: 18px; height: 18px; display: block; position: absolute; left: 0; top: 0px; border-radius: 50%; background: rgb(255, 255, 255); box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); } .cm-toggle:checked:before { /* Modification */ content: 'ON'; text-indent: 18px; /* END */ left: 20px; box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.6); } .cm-toggle:checked:after { background: #3895D3; }

 <input class='cm-toggle' type='checkbox' checked>