<article>
  <input type="radio" id="sa" name="s"/>
  <input type="radio" id="sb" name="s"/>
  <input type="radio" id="sc" name="s"/>
  <input type="radio" id="sd" name="s"/>
  <input type="radio" id="se" name="s"/>

  <input type="radio" id="ha" name="h"/>
  <input type="radio" id="hb" name="h"/>
  <input type="radio" id="hc" name="h"/>
  <input type="radio" id="hd" name="h"/>
  <input type="radio" id="he" name="h"/>  


  <h2>Unicode Emoji</h2>
  <ul>
    <li>Skin</li>
    <li><label for="sa">&#x1F3FB</label></li>
    <li><label for="sb">&#x1F3FC</label></li>
    <li><label for="sc">&#x1F3FD</label></li>
    <li><label for="sd">&#x1F3FE</label></li>
    <li><label for="se">&#x1F3FF</label></li>
  </ul>
  <ul>
    <li>Hair</li>
    <li><label for="ha">&#x200D&#x1F9B0</label></li>
    <li><label for="hb">&#x200D&#x1F9B1</label></li>
    <li><label for="hc">&#x200D&#x1F9B2</label></li>    
    <li><label for="hd">&#x200D&#x1F9B3</label></li>  
  </ul> 
  <div class="emoji a"></div>
  <div class="emoji b"></div>
  <footer>
    <a href="https://unicode.org/emoji/charts/full-emoji-list.html" target="_blank">emoli list</a>
    <a href="https://unicode.org/emoji/charts/full-emoji-modifiers.html" target="_blank">emoli modifiers</a>  
  </footer>
</article>

html {
  --woman: '\1F469';
    --man: '\1F468';  
     --skin: '';  // default 
     --hair: '';  // default 
     --join: '\200D';
}

#sa:checked ~ .emoji {--skin: '\1F3FB'; }
#sb:checked ~ .emoji {--skin: '\1F3FC'; }
#sc:checked ~ .emoji {--skin: '\1F3FD'; }
#sd:checked ~ .emoji {--skin: '\1F3FE'; }
#se:checked ~ .emoji {--skin: '\1F3FF'; }

#ha:checked ~ .emoji {--hair: '\1F9B0'; }
#hb:checked ~ .emoji {--hair: '\1F9B1'; }
#hc:checked ~ .emoji {--hair: '\1F9B2'; }
#hd:checked ~ .emoji {--hair: '\1F9B3'; }
#he:checked ~ .emoji {--hair: '\1F9B4'; }


.emoji.a:before {
  content: var(--woman) var(--skin) var(--join) var(--hair);
}
.emoji.b:before {
  content: var(--man) var(--skin) var(--join) var(--hair);
}










// nothing special 
.emoji:before { font-size: 72px; } 
.emoji { display: inline; padding: 1rem; }
body { height: 100vh; display: flex; }
article { margin: auto; border-radius: .5rem; box-shadow: 0 0 1rem rgba(0,0,0,0.2); text-align: center; padding: 1rem; }
input { position: fixed; left: -999px; }
ul { display: flex; list-style: none; margin: 0; padding: 0; }
ul+ul { margin-bottom: 1rem; }
li { padding: .5rem; }
label { cursor: pointer; }
a { font-size: .625rem; padding: .5rem; color: #666 }