title: CSS - Post checkmark in upper left corner of div
body: <p>I want to have a <code>div</code> element that acts like a checkbox. When a user clicks it once, a checkbox will appear in the upper-left corner. If a user clicks the div again, the checkbox will disappear. Currently, I'm using the following CSS, which can be seen in this <a href="https://jsfiddle.net/xzeg86zx/" rel="nofollow noreferrer">Fiddle</a>.</p>
  
  <pre><code>.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;
  }        
  </code></pre>
  
  <p>As shown in the Fiddle, the triangle successfully toggles. However, I want to show a white checkmark in that triangle. How can I do that, preferably with CSS. I'm not sure where to go.</p>
  
  <p>Thanks,</p>