Как сделать подобный эффект для линии?
Используйте линейный градиент, что-то вроде такого:div {
    background: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
    background-size: 100% 2px;
    background-position: bottom;
    background-repeat: no-repeat;
}
snippet
p.s. градиент сделал на www.colorzilla.com/gradient-editor