ボーダーにグラデーションをかける

リスト要素やhrのボーダーにグラデーションをかけることができます.

f:id:hrt0kmt:20160424225515p:plain

<dt class="a">aaaaaaaaa</dt>
<dd>bbbbbbbbbbbbbbbbbb</dd>
.a {
    position: relative;
}
.a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 1px;
    margin: 0 auto;
    text-align: center;
    background-image: -webkit-linear-gradient(left, transparent, #D8D790 25%, #D8D790 75%, transparent);
    background-image: linear-gradient(to right, transparent, #D8D790 25%, #D8D790 75%, transparent);
    background-position: center;
    background-repeat: no-repeat;
}

こちら参考にさせていただきました.