Очень много тем,но ни в одной нет ответа

HTML-CSS
1

Всем доброго времени суток !

Как и у всех в этом уроке не проходят проверку 3 последних пункта,уже не знаю что делать. transition у меня нет… Эти пункты звучат так:

  • 12. When the checkboxes are selected, there should be a checkmark ✓ in the center of the checkbox.

  • Failed:13. When the checkbox is checked, the background color of the checkbox should change to a color of your choosing.

  • Failed:14. When the checkbox is checked, the border color of the checkbox should change to a color of your choosing.

Мой html код выглядит так:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Document</title>
  </head>
  <body>
    <h1>Feature Selection</h1>

    <div class="feature-card-container">
      <div class="card">
        <label for="card-one"
          >Cloud Storage <input type="checkbox" id="card-one" />
        </label>
        <h3>Cloud Storage</h3>
        <p>100 Gigabyte secure storage</p>
      </div>
      <div class="card">
        <label for="card-two"
          >Dedicated Support <input type="checkbox" id="card-two" />
        </label>
        <h3>Dedicated Support</h3>
        <p>24/7 customer help</p>
      </div>
      <div class="card">
        <label for="card-three"
          >Advanced Analytics <input type="checkbox" id="card-three" />
        </label>
        <h3>Advanced Analytics</h3>
        <p>Insights & reports</p>
      </div>
      <div class="card">
        <label for="card-four"
          >Custom User Themes <input type="checkbox" id="card-four" />
        </label>
        <h3>Custom User Themes</h3>
        <p>Personalized dashboard design</p>
      </div>
      <div class="card">
        <label for="card-five"
          >Multi-User Collab <input type="checkbox" id="card-five" />
        </label>
        <h3>Multi-User Collab</h3>
        <p>Team access and sharing</p>
      </div>
      <div class="card">
        <label for="card-one"
          >API Access <input type="checkbox" id="card-one" />
        </label>
        <h3>API Access</h3>
        <p>Integrate with your custom built tools</p>
      </div>
    </div>
  </body>
</html>

Мой css выглядит так:

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h1 {
  text-align: center;
}

.feature-card-container {
  margin: 10px auto;
  width: 500px;
  max-height: 500px;
  padding: 10px;
}
.card {
  border: 2px solid lightgray;
  width: 250px;
  padding: 10px;
  border-radius: 10px;
  text-align: center;
  margin: 20px;
}

.card:hover {
  box-shadow: 5px, 5px, 10px, 5px;
  border-color: orange;
  cursor: pointer;
}

label {
  display: block;
  text-align: right;
}

input[type="checkbox"] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 1px solid black;
  border-radius: 5px;
  background-color: white;
}

input[type="checkbox"]:checked {
  background-color: blue;
  border-color: green;
  text-align: center;
}

.card input[type="checkbox"]:checked:after {
  content: "✓";
  display: block;
  text-align: center;
  font-weight: bold;
  color: white;
  line-height: 20px;
}

Вроде все верно написано,уже скопировал с примера,который идет к уроку,но все равно задание не принимает… Что делать ?? Подскажите пожалуйстаааа !!

2

Check your syntax using after

https://www.w3schools.com/cssref/sel_after.php