[Solved] how to make smileys emoji in html and css only

by


Try this, hope you might get some idea how to design emojis.

[class^="emoji"]{
  width: 50px;
    height: 50px;
    background: #9E9E9E;
    display: inline-block;
    border-radius: 5px;
  position:relative;
}
.emoji1:before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background: #000;
    border-radius: 25px;
    left: 10px;
    top: 10px;
}
.emoji1:after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background: #000;
    border-radius: 25px;
    right: 10px;
    top: 10px;
}
.emoji1 i:before {
    content: "";
    position: absolute;
    width: 20px;
    height: 4px;
    background: #000;
    bottom: 14px;
    left: 0;
    right: 0;
    margin: 0 auto;
    border-radius: 2px;
}





.emoji2:before {
    content: "";
    position: absolute;
    width: 12px;
    height: 4px;
    background: #000;
    border-radius: 7px;
    left: 10px;
    top: 13px;
    transform: rotate(20deg);

}
.emoji2:after {
    content: "";
    position: absolute;
    width: 12px;
    height: 4px;
    background: #000;
    border-radius: 7px;
    right: 10px;
    top: 13px;
    transform: rotate(-20deg);
}
.emoji2 i:before {
    content: "";
    position: absolute;
    width: 24px;
    height: 4px;
    background: #000;
    bottom: 14px;
    left: 0;
    right: 0;
    margin: 0 auto;
    border-radius: 5px;
    transform: rotate(-20deg);
}

span{
  margin:20px;
}
<span class="emoji1"><i></i></span>

<span class="emoji2"><i></i></span>

solved how to make smileys emoji in html and css only