0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p><b>Loading…</b>Everything will be ready in few seconds</p>
1
<p><b>Loading…</b>Everything will be ready in few seconds</p>
2
<ul><li>Theory</li>
2
<ul><li>Theory</li>
3
<li>Theory</li>
3
<li>Theory</li>
4
<li>Comments</li>
4
<li>Comments</li>
5
</ul><h2>Toggle switches, step 2</h2>
5
</ul><h2>Toggle switches, step 2</h2>
6
<p>Use the label::before pseudo-element to build a toggle switch “scale”: set its size, border color, and position in space.</p>
6
<p>Use the label::before pseudo-element to build a toggle switch “scale”: set its size, border color, and position in space.</p>
7
<h2>Comments</h2>
7
<h2>Comments</h2>
8
<ul><li>index.html</li>
8
<ul><li>index.html</li>
9
<li>style.css</li>
9
<li>style.css</li>
10
</ul><p>HTML</p>
10
</ul><p>HTML</p>
11
<p><!DOCTYPE html> <html lang="en"> <head> <title>Toggle switches, step 2</title> <meta charset="utf-8"> <link rel="stylesheet" href="material.css"> <link rel="stylesheet" href="style.css"> </head> <body class="green-theme"> <section class="card"> <h1 class="question"><span>What tags have never been included as part of HTML?</span></h1> <form class="answers" action="https://echo.htmlacademy.ru/courses" method="post"> <button class="fab" type="submit">&#58882;</button> <div> <input type="checkbox" id="answer1"> <label for="answer1">nextid</label> </div> <div> <input type="checkbox" id="answer2"> <label for="answer2">bgsound</label> </div> <div> <input type="checkbox" id="answer3"> <label for="answer3">hole</label> </div> </form> </section> </body> </html></p>
11
<p><!DOCTYPE html> <html lang="en"> <head> <title>Toggle switches, step 2</title> <meta charset="utf-8"> <link rel="stylesheet" href="material.css"> <link rel="stylesheet" href="style.css"> </head> <body class="green-theme"> <section class="card"> <h1 class="question"><span>What tags have never been included as part of HTML?</span></h1> <form class="answers" action="https://echo.htmlacademy.ru/courses" method="post"> <button class="fab" type="submit">&#58882;</button> <div> <input type="checkbox" id="answer1"> <label for="answer1">nextid</label> </div> <div> <input type="checkbox" id="answer2"> <label for="answer2">bgsound</label> </div> <div> <input type="checkbox" id="answer3"> <label for="answer3">hole</label> </div> </form> </section> </body> </html></p>
12
<p>CSS</p>
12
<p>CSS</p>
13
<p>label { position: relative; display: inline-block; max-width: 100px; word-wrap: break-word; cursor: pointer; } label::before, label::after { position: absolute; display: block; content: ""; } label::before { } input[type="checkbox"] { display: none; }</p>
13
<p>label { position: relative; display: inline-block; max-width: 100px; word-wrap: break-word; cursor: pointer; } label::before, label::after { position: absolute; display: block; content: ""; } label::before { } input[type="checkbox"] { display: none; }</p>
14
<p>Thanks! We’ll fix everything at once!</p>
14
<p>Thanks! We’ll fix everything at once!</p>
15
<p>The code has changed, click “Refresh” or turn autorun on.</p>
15
<p>The code has changed, click “Refresh” or turn autorun on.</p>
16
<p>You’ve gone to a different page</p>
16
<p>You’ve gone to a different page</p>
17
<p>Click inside the mini-browser to shift the focus onto this window.</p>
17
<p>Click inside the mini-browser to shift the focus onto this window.</p>
18
<p>100%</p>
18
<p>100%</p>
19
<ol><li>For label::before, set a width of 32px and a height of 1px,</li>
19
<ol><li>For label::before, set a width of 32px and a height of 1px,</li>
20
<li>set a solid top border that is 1px thick and #5a5a5a in color,</li>
20
<li>set a solid top border that is 1px thick and #5a5a5a in color,</li>
21
<li>and finally specify the coordinates of top: 7px and left: 108px.</li>
21
<li>and finally specify the coordinates of top: 7px and left: 108px.</li>
22
</ol>
22
</ol>