javascript - CSS - 在 div 的左上角添加复选标记

Question

我想要一个像复选框一样的 div 元素。当用户单击一次时，一个复选框将出现在左上角。如果用户再次单击 div，复选框将消失。目前，我正在使用以下 CSS，可以在这个 Fiddle 中看到.

.my-checkfield {
  border: solid 1px black;
  color: black;
  padding: 24px;
  position: relative;
}

.my-checkfield-selected {
  border: solid 1px green;
}

.my-checkfield-selected::before,
.my-checkfield-selected::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-color: transparent;
  border-style: solid;
}

.my-checkfield-selected::before {
  border-width: 0;
}

.my-checkfield-selected::after {
  border-radius: 0;
  border-width: 12px;
  border-left-color: green;
  border-top-color: green;
}        

如 Fiddle 所示，三 Angular 形成功切换。但是，我想在该三 Angular 形中显示一个白色复选标记。我该怎么做，最好使用 CSS。我不确定该去哪里。

谢谢，

Answer 1

通过交换 ::before/::after，所以 ::before 用于绿色 Angular ，您可以简单地添加 content: '\2713'(\2713 是 checkmark 的 CSS 代码)到 ::after

function toggle(elem) {
  $(elem).toggleClass('my-checkfield-selected');
}

.my-checkfield {
  border: solid 1px black;
  color: black;
  padding: 24px;
  position: relative;
}

.my-checkfield-selected {
  border: solid 1px green;
}

.my-checkfield-selected::before,
.my-checkfield-selected::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-color: transparent;
  border-style: solid;
}

.my-checkfield-selected::after {
  content: '\2713';
  font-size: 13px;
  line-height: 13px;
  font-weight: bold;
  color: white;
}

.my-checkfield-selected::before {
  border-radius: 0;
  border-width: 12px;
  border-left-color: green;
  border-top-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="my-checkfield" onclick="toggle(this)">
  [hi]
</div>