Interactive online courses HTML Academy
2026-03-09 12:22 Diff
https://htmlacademy.org/courses/dynamic/smooth-transitions/toggle-switches-2

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

Toggle switches, step 2

Use the label::before pseudo-element to build a toggle switch “scale”: set its size, border color, and position in space.

Comments

  • index.html
  • style.css

HTML

<!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>

CSS

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; }

Thanks! We’ll fix everything at once!

The code has changed, click “Refresh” or turn autorun on.

You’ve gone to a different page

Click inside the mini-browser to shift the focus onto this window.

100%

  1. For label::before, set a width of 32px and a height of 1px,
  2. set a solid top border that is 1px thick and #5a5a5a in color,
  3. and finally specify the coordinates of top: 7px and left: 108px.