2色ボーダー付きのタイトルを作成する

◯タイトルテキストによって色付きラインの長さを変える場合
　spanで色線の長さを可変させる

<div class="hTitle">
	<h3 class="heading"><span>事業内容</span></h3>
</div>

.hTitle {
    border-bottom: 3px solid #cccccc;
    height: 42px;
    margin-bottom: 25px;
    position: relative;
    .heading {
        font-size: 25px;
        height: 42px;
        margin-right: 10px;
        span {
            border-bottom: 3px solid #333333;
            display: block;
            float: left;
            font-weight: bold;
            height: 42px;
            margin-right: 10px;
            position: relative;
            z-index: 2;
        }
    }
}

◯色付きラインの長さを固定する場合

<div class="hTitle">
    <h3>事業内容</h3>
</div>

.subTitle {
    border-bottom: 3px solid #cccccc;
    height: 42px;
    margin-bottom: 25px;
    position: relative;
    font-size: 22px;
    &:before {
        background: #333333;
        bottom: -3px;
        content: '';
        display: block;
        height: 3px;
        left: 0;
        position: absolute;
        width: 50px;
    }
}