html - 单击图像时无法在图像上显示刻度线？

Question

我试图在用户点击图像时在图像顶部显示一个刻度线。我有一个输入单选按钮元素和标签，它们都包裹在 anchor 元素和我拥有的标签内，还有一个图像元素，我使用 css 应用刻度线。每当我点击图片时，什么都没有发生。如果有人能提供帮助，我将不胜感激。这是片段

.icon {
    margin: 5px 0;
}

.icon input {
    display: none;
}

.icon img {
    vertical-align: middle;
    width: 50%;
    border: 2px solid greenyellow;
}

.icon input:checked {
    background: rgba(0,0,0,0.5);
}

.icon input:checked::after{
    content: '✔';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    transform: translate(-50%, -50%);
    color: black;
    font-size: 20px;
    text-align: center;
    border: 1px solid black;
    border-radius: 50%;
}

<div class="row">
    <a href="#" class="col-sm-4 icon">
        <input type="radio" name="selimg" id="selimg1">
        <label for="selimg1">
            <img src="./images/baby-bottle.png">
        </label> 
    </a>
    <a href="#" class="col-sm-4 icon">
        <input type="radio" name="selimg" id="selimg2">
        <label for="selimg2">
            <img src="./images/badge.png">
        </label>
    </a>
    <a href="#" class="col-sm-4 icon">
        <img src="./images/cardiologist.png">
    </a>
</div>

Answer 1

::before 和 ::after 仅适用于容器元素，因此您不能在输入中使用它。

尝试使用 .icon input:checked + label::before 而不是 .icon input:checked::after。

(您的 CSS 的其余部分需要调整以使其显示您想要的方式，但这至少会使其显示出来并且您可以将其移动到需要的位置)

.icon {
  margin: 5px 0;
}

.icon input {
  display: none;
}

.icon img {
  vertical-align: middle;
  width: 50%;
  border: 2px solid greenyellow;
}

.icon input:checked {
  background: rgba(0, 0, 0, 0.5);
}

.icon input:checked + label::before {
  content: '✔';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%);
  color: black;
  font-size: 20px;
  text-align: center;
  border: 1px solid black;
  border-radius: 50%;
}

<div class="row">
  <a href="#" class="col-sm-4 icon">
    <input type="radio" name="selimg" id="selimg1">
    <label for="selimg1">
      <img src="./images/baby-bottle.png">
    </label>
  </a>
  <a href="#" class="col-sm-4 icon">
    <input type="radio" name="selimg" id="selimg2">
    <label for="selimg2">
      <img src="./images/badge.png">
    </label>
  </a>
  <a href="#" class="col-sm-4 icon">
    <img src="./images/cardiologist.png">
  </a>
</div>