如何将关闭文本添加到现有的切换开关

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>