.p-bottom-border {
    position: relative;
}

    .p-bottom-border:after {
        content: "";
        position: absolute;
        bottom: -8px;
        left: 0;
        height: 3px;
        width: 20px;
        background-color: #f4ba19;
        transition: all .2s ease;
    }

    .p-bottom-border:hover::after {
        width: 100%;
    }

.p-bottom-border2 {
    position: relative
}

    .p-bottom-border2:after {
        content: "";
        position: absolute;
        bottom: -8px;
        left: 50%;
        height: 2px;
        width: 0;
        margin-left: -10px;
        background-color: black;
        transition: all .2s ease;
    }

    .p-bottom-border2:hover:after {
        box-shadow: none;
        border-bottom-color: rgba(0,0,0,.12);
        width: 100%;
        left: 0;
        margin-left: 0
    }