Change border to 50% on mobile

When viewed on mobile the words boutique, handcrafted and coastal on this page appear in a vertical grid. There is a line between them that is actually a top and bottom border in the container encompassing handcrafted.

I would like to make this border 50% wide and centred. Is this possible? And, if so, how?


CSS borders have to extend the width of the element there applied to.
To do that would require some CSS:

media(max-width: 768px) {
    .custom-border {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;

    .custom-border:after {
        content: '';
        display: block;
        height: 2px;
        width: 50%;
        background-color: #000;

Then select the Container and in Advanced > Additional CSS Class(es) add: custom-border

And then remove the Border style from the container.