如何將關閉文本添加到現有的切換開關

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>