Add Colored Bar under Product

Suppose you want to add these colored bars: NEW, FREESHIP under Product Images on the Shop/Category Page.

#1. First, assign 2 tags: NEW, FREESHIP for these products.

#2. Use this code to Custom CSS box

div.tag-new figure.grid-image:after {
    content: "NEW";
    display: block;
    width: 100%;
    background-color: #f1f;
    color: #fff;
    padding: 5px;
    line-height: 20px;
    text-align: center;
}
div.tag-freeship figure.grid-image:after {
    content: "FREESHIP";
    display: block;
    width: 100%;
    background-color: green;
    color: #fff;
    padding: 5px;
    line-height: 20px;
    text-align: center;
}