Border-bottom and border-image issues

Question

I'm having some issues with border-bottom and border-image.As I understand it I can set an image for my border , in this case I want the image to be :

However I do not get the image and it just stays a normal 3px border with the color I've specified.And it seems that the image is not taken into consideration.

Can anyone point me to the right direction(Check bootply):

http://www.bootply.com/G5LTvI8YR9

Answer 1

You can do it through css only without using any image

Demo

ul.nav a:hover {
    position: relative;
    border-bottom: 4px solid #f39385;
}

ul.nav a:hover:after, ul.nav a:hover:before {
    bottom: 0px;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

ul.nav a:hover:after {
    border-color: rgba(243, 147, 133, 0);
    border-bottom-color: #f39385;
    border-width: 3px;
    margin-left: -3px;
}

ul.nav a:hover:before {
    border-bottom-color: #f39385;
    border-width: -6px;
    margin-left: -6px;
    border-color: rgba(243, 147, 133, 0);
}