display text on toggle button - css

Question

I have a simple checkbox toggle that change the background color when clicked or checked, that indicates active or not. My problem is I don't know how to put label on that button.
something like this.
I'm not sure if that possible.
I hope you understand me.
Thanks
CODEPEN
body{
background-color: #ddd;
}
.toggle {
-webkit-appearance: none;
appearance: none;
width: 65.57px;
padding: 10px;
height: 26.32px;
display: inline-block;
position: relative;
border-radius: 13px;
overflow: hidden;
line-height: 16px;
text-align: center;
font-size: 12px;
outline: none;
border: none;
cursor: pointer;
background: #E1F6FF;
transition: background-color ease 0.3s;
}
.toggle:before {
content: "text text";
display: block;
position: absolute;
z-index: 2;
width: 24px;
height: 24px;
background: #fff;
left: 0;
top: 0;
border-radius: 50%;
padding-top: 5px;
text-indent: -30px;
word-spacing: 37px;
color: #4D5585;
text-shadow: -1px -1px rgba(0,0,0,0.15);
white-space: nowrap;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
transition: all cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s;
}
.toggle:checked {
background: #dadce8;
}
.toggle:checked:before {
left: 40px;
}
.center{
text-align: center;
}
<div class="center">
<input class="toggle" type="checkbox" />
</center>

Answer 1

To achive desire result after edit, we are going to build something new.
HTML
<div class="switch">
<input type="checkbox" name="switch" class="switch-checkbox" id="myswitch" checked>
<label class="switch-labels" for="myswitch">
<span class="switch-text"></span>
<span class="switch-dot"></span>
</label>
</div>
We will use a main div with class switch to build our switch. This will hold 2 things
The input so we can target it state and use both for styles and what i suppose future js styles
A label that will hold 2 things
2.1 The on and off text as before and after of a span
2.2 The white dot that slides on each state
CSS is commented on the snippet
Hope this is what you were looking for. Happy to explain or help in a better solution if needed.
body {
background-color: #ddd;
}
/*Style main div and remove default checkbox*/
.switch {
position: relative;
width: 75px;
margin: 0 auto;
}
.switch-checkbox {
display: none;
}
/*Style words and oval switch */
.switch-labels {
display: block;
overflow: hidden;
cursor: pointer;
border-radius: 20px;
}
.switch-text {
display: block;
width: 200%;
margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.switch-text:before,
.switch-text:after {
float: left;
width: 50%;
line-height: 30px;
color: white;
box-sizing: border-box;
}
.switch-text:before {
content: "ON";
padding-left: 10px;
background-color: #E1F6FF;
color: #000000;
}
.switch-text:after {
content: "OFF";
padding-right: 10px;
background-color: #4D5585;
color: #FFFFFF;
text-align: right;
}
/*Style center dot*/
.switch-dot {
width: 30px;
height: 30px;
background: #FFFFFF;
position: absolute;
top: 0;
bottom: 0;
right: 41px;
margin-right: 5px;
border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.switch-dot:after{
content: "";
position: absolute;
width: 20px;
height: 20px;
background-size: cover;
background-image: url('http://www.free-icons-download.net/images/multiply-icon-27981.png');
margin: 5px 0 0 5px;
}
/*State changer*/
.switch-checkbox:checked+.switch-labels .switch-text {
margin-left: 0;
}
.switch-checkbox:checked+.switch-labels .switch-dot {
right: 0px;
margin-right: 0px;
}
<div class="switch">
<input type="checkbox" name="switch" class="switch-checkbox" id="myswitch" checked>
<label class="switch-labels" for="myswitch">
<span class="switch-text"></span>
<span class="switch-dot"></span>
</label>
</div>

Answer 2

Change the text in content for toggle.before to
content: "hide show";

Answer 3

Well, just want to add labels?
use below inside .toggle:before
content: "Hide Show";
instead
content: "text text";
Thanks. Ask for more queries.

Answer 4

If you want to put the text on the white circle means , you can add this one in css
.toggle:before{
text-overflow: ellipsis;
overflow: hidden;
}

Answer 5

I am not sure if I understand your question right way. Do you mean add a lebal to toggle this checkbox?
body{
background-color: #ddd;
}
.toggle {
-webkit-appearance: none;
appearance: none;
width: 65.57px;
padding: 10px;
height: 26.32px;
display: inline-block;
position: relative;
border-radius: 13px;
overflow: hidden;
line-height: 16px;
text-align: center;
font-size: 12px;
outline: none;
border: none;
cursor: pointer;
background: #E1F6FF;
transition: background-color ease 0.3s;
}
.toggle:before {
content: "text text";
display: block;
position: absolute;
z-index: 2;
width: 24px;
height: 24px;
background: #fff;
left: 0;
top: 0;
border-radius: 50%;
padding-top: 5px;
text-indent: -30px;
word-spacing: 37px;
color: #4D5585;
text-shadow: -1px -1px rgba(0,0,0,0.15);
white-space: nowrap;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
transition: all cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s;
}
.toggle:checked {
background: #dadce8;
}
.toggle:checked:before {
left: 40px;
}
.center{
text-align: center;
}
<div class="center">
<input id="sample" class="toggle" type="checkbox" />
<label for="sample">This is a sample</label>
</center>