정상적인 방법으로 밑줄을 그으면 폰트 크기가 큰 경우에는 거기에 맞게 두께가 자동으로 두꺼워진다. 이 두꺼운 밑줄은 대다수의 디자이너들이 좋아하지 않는 것 같은데 그래서 보통은 요청이 오면 정상적인 텍스트 꾸미기보다 border-bottom을 이용하여 라인을 그어주는 편이다.

그런데 이번 문제는 여러줄이라 border-bottom으로 하면 박스 하단에만 그어지니 안됐고 무엇보다 내가 보기에도 두꺼워진 언더라인이 보기가 싫어서 한참 고민했다. (왠지 CSS3 요소중에 언더라인 굵기를 지정하는게 있을 법한데 없더라)

고민 끝에 해결됐다. 고민은 길었는데 해결하고나니 너무 간단하다.

@mixin customUnderline($lineOffsetY, $lineSize: 1px, $lineColor: #000) {
    background-image: linear-gradient(transparent $lineOffsetY - 1, $lineColor $lineSize);
    background-size: auto $lineOffsetY;
}

p {
    font-size: 20px;
    line-height: 40px;

    span {
        @include customUnderline(36px);
    }
}

각 줄마다 텍스트 길이에 맞게 백그라운드 라인이 끊어지게 하기 위해서 인라인 요소를 자식으로 쓸 수 밖에 없는데 덕분에 하고자하는 줄간격과 그리는 라인간격이 일치하지 않을 수 있다(즉 line-height값과 $lineOffsetY 값이 일치하지 않을 수 있다, 블록요소라면 일치해도 된다).
폰트 종류마다 줄간격이 다르니 어떻게 자동으로 해볼 수가 없었는데 폰트 크기가 변한다면 폰트 크기와 연계해서 $lineOffsetY 값을 수정하면서 맞출 수 밖에 없다.