Creating smiley and adding expression

Here I created three smileys using CSS.

Fiddle - Demo

Should express Happy(this is there): <div id="smiley1">☻ </div>
Should express sad :<div id="smiley2">☻ </div> ?? 
Should express neutral<div id="smiley3">☻</div> ??

Issues:

1. All of them should be placed one after another (currently overlapping)
2. How to make it to express sad and neutral?

CSS:

#smiley1 {
    -webkit-border-radius:50px;
    background-color:rgba(0, 0, 0, 0);
    color: red;
    width:350px;
    position: absolute;
    text-align: center;
    font-size: 20pt;
    z-index: 9999;
}

#smiley2 {
    -webkit-border-radius:50px;
    background-color:rgba(0, 0, 0, 0);
    color: blue;
    width:350px;
    position: absolute;
    text-align: center;
    font-size: 20pt;
    z-index: 9999;
}
#smiley3 {
    -webkit-border-radius:50px;
    background-color:rgba(0, 0, 0, 0);
    color: green;
    width:350px;
    position: absolute;
    text-align: center;
    font-size: 20pt;
    z-index: 9999;
}

Those are the fonts, so you cannot change their moods using CSS, instead do it something like this, I made them from scratch..

Demo

Here, I've used :before and :after pseudo to create the eyes of the smileys, and the nested span tag is used for the expression... I've not refactored my CSS, but you can chop it to a great extent by merging the common properties in a class and calling multiple classes on a single element.

.smiley {
    height: 100px;
    width: 100px;
    border: 2px solid #000;
    border-radius: 50%;
    position: relative;
}

.smiley:before {
    content: "";
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: absolute;
    border: 2px solid #000;
    left: 15px;
    top: 30px;
}

.smiley:after {
    content: "";
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: absolute;
    border: 2px solid #000;
    right: 15px;
    top: 30px;
}

.smiley span {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    border-bottom: 2px solid red;
    position: absolute;
    bottom: 10px;
    left: 25px;
}










.neutral {
    height: 100px;
    width: 100px;
    border: 2px solid #000;
    border-radius: 50%;
    position: relative;
}

.neutral:before {
    content: "";
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: absolute;
    border: 2px solid #000;
    left: 15px;
    top: 30px;
}

.neutral:after {
    content: "";
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: absolute;
    border: 2px solid #000;
    right: 15px;
    top: 30px;
}

.neutral span {
    height: 50px;
    width: 50px;
    border-bottom: 2px solid red;
    position: absolute;
    bottom: 20px;
    left: 25px;
}










.sad {
    height: 100px;
    width: 100px;
    border: 2px solid #000;
    border-radius: 50%;
    position: relative;
}

.sad:before {
    content: "";
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: absolute;
    border: 2px solid #000;
    left: 15px;
    top: 30px;
}

.sad:after {
    content: "";
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: absolute;
    border: 2px solid #000;
    right: 15px;
    top: 30px;
}

.sad span {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    border-top: 2px solid red;
    position: absolute;
    bottom: -15px;
    left: 25px;
}