Trying to add "blockquote:after" for closing quote icon

Against my recommendations, I am being asked to add a closing quote icon to the right hand side of a paragraph.

For the original Left Quote, it is setup as:

blockquote {
    padding: 10px 0 10px 60px;
    font-size: 14px;
    line-height: 20px;
    font-style: italic;
    position: relative;
}
blockquote:before {
    position: absolute;
    top: 0px;
    left: 10px;
    display: block;
    color: #DDD;
    color: rgba(0, 0, 0, 0.1);
    font-size: 32px;
}
.hb-moon-quotes-left:before, blockquote:before {
    content: "\e099";
}

I tried to show the Right Quote by changing and adding the following:

blockquote {
    padding: 10px 60px 10px 60px; //changed right padding
    font-size: 14px;
    line-height: 20px;
    font-style: italic;
    position: relative;
}
blockquote:after {
    position: absolute;
    bottom: 0px;
    right: 10px; //changed from left
    display: block;
    color: #DDD;
    color: rgba(0, 0, 0, 0.1);
    font-size: 32px;
}
blockquote:after {
    content: "\e09a";
    //got icon #'s from .hb-moon-quotes-right:before{content: "\e09a"}
}

Unfortunately all I get is a grey box and sort of lost after that. Can you help point me in the right direction?

Thank you!