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

Question

我想在我的切换开关中插入一个 ON/OFF 文本。 当滑块打开时，应显示“ON”文本，当滑块关闭时，应显示“OFF”文本。 它们应该显示在切换内。 请帮忙。

 .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

你可以这样做：

 .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

添加这个

 .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>