在 CSS 中更改 Slider 中内容的位置

Question

我想更改 ON-OFF Slider 中内容的位置。 这样“ON”的内容在左边，“OFF”的内容在右边。 我尝试在 CSS 中使用 content-align，但它没有按照我想要的方式工作。

我无法发布问题，不添加更多细节，但我不知道该说什么了，所以我写了这篇简短的文字，以获得更多的话。 :D

感谢您的回答！

亲切的问候马克斯

 .switch { position: relative; display: inline-block; width: 60px; height: 34px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked + .slider { background-color: #2196F3; } input:focus + .slider { box-shadow: 0 0 1px #2196F3; } input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } .slider:after { content: 'OFF'; align-content: center; } input:checked + .slider:after { content: 'ON'; }

 <label class="switch"> <input type="checkbox" id="colorSlider" > <span class="slider round"></span> </label>

Answer 1

你就.slider:after ……看下面的代码，我在.slider:after上添加了line-height .slider:after等于总高度以垂直居中文本并display: block; + text-align right/left 根据情况而定。

 .switch { position: relative; display: inline-block; width: 60px; height: 34px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked+.slider { background-color: #2196F3; } input:focus+.slider { box-shadow: 0 0 1px #2196F3; } input:checked+.slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } /* only change below this line */ .slider:after { font-size: .8em; content: 'OFF'; text-align: right; line-height: 34px; display: block; padding: 0 4px; } input:checked + .slider:after { content: 'ON'; text-align: left; }

 <!-- same HTML code --> <label class="switch"> <input type="checkbox" id="colorSlider" > <span class="slider round"></span> </label>