<div class="a-line"></div>

<hr class="my-3">

<header class="a-line-dotted">
	<h2>Section Title</h2>
</header>

<hr class="my-3">

<header class="a-line text-center">
	<h2>Section Title</h2>
</header>

[class*="a-line"] {

    display: block;
    font-size: 0;
    margin: space(2) 0;

    &:first-child {

        margin-top: 0;

    }

    &:last-child {

        margin-bottom: 0;

    }

    &:after {

        @include calc-size(width, 30px, 80px);
        border-bottom: 2px solid;
        content: '';
        display: inline-block;

    }

    &:not(:empty) {

        &:after {

            margin-top: space(2);

        }

    }

}

.a-line {

    &-dotted {

        &:after {

            @include font-size(normal);
            border: 0;
            content: '······';
            line-height: .125;
            width: auto;

        }

    }

}