如何使用課前和課後更改交換機上的內容？

Question

我需要通過使用css在滑塊開關上放置內容，但Iam無法獲取內容的後續類。

下面是我的HTML和CSS代碼：

.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: "Y"; 
 
    font-weight: bold; 
 
    vertical-align: center; 
 
    font-size:14px; 
 
    color:white; 
 
    height: 26px; 
 
    width: 26px; 
 
    left: 0px; 
 
    right:0px; 
 
    bottom:-6px; 
 
    background-color: #2196F3; 
 
    -webkit-transition: .4s; 
 
    transition: .4s; 
 
} 
 
.slider:after { 
 
    position: absolute; 
 
    content: "N"; 
 
    font-weight: bold; 
 
    vertical-align: center; 
 
    font-size:14px; 
 
    color:white; 
 
    height: 26px; 
 
    width: 26px; 
 
    left: 0px; 
 
    right:0px; 
 
    bottom:-6px; 
 
    background-color: white; 
 
    -webkit-transition: .4s; 
 
    transition: .4s; 
 
} 
 

 
input:checked + .slider { 
 
    background-color:#6ab8f7; 
 
} 
 
    input:focus + .slider { 
 
    box-shadow: 0 0 1px #6ab8f7; 
 
} 
 
    input:checked + .slider:before { 
 
    -webkit-transform: translateX(20px); 
 
    -ms-transform: translateX(20px); 
 
    transform: translateX(20px); 
 
} 
 
.slider.round { 
 
    border-radius: 34px; 
 
} 
 
.slider.round:before { 
 
    border-radius: 50%; 
 
}

<label class="switch"> 
 
<input type="checkbox"> 
 
<div class="slider round"></div>

這是我得到的輸出。

但我需要改變滑塊以「白」的內容，以「N」和顏色。但在我的情況下，我通過課後使用得到以下輸出。

我需要改變顏色和內容時，它被觸發。

Answer 1

添加下一個同級標記（~）與:checked檢查來實現這個

input[type=checkbox]:checked ~ .slider:before { 
position: absolute; 
content: "Y"; 
font-weight: bold; 
vertical-align: center; 
font-size:14px; 
color:white; 
height: 26px; 
width: 26px; 
left: 0px; 
right:0px; 
bottom:-6px; 
background-color: #2196F3; 
-webkit-transition: .4s; 
transition: .4s; 
} 
input[type=checkbox] ~ .slider:before { 
position: absolute; 
content: "N"; 
font-weight: bold; 
vertical-align: center; 
font-size:14px; 
color:white; 
height: 26px; 
width: 26px; 
left: 0px; 
right:0px; 
bottom:-6px; 
background-color: white; 
-webkit-transition: .4s; 
transition: .4s; 
}