1원팁) 문장에서 원하는 부분의 글자 위에 선긋기

위와 같은 모양을 만들고자 할때 선긋기 용으로 일일이 div 같은 요소를 넣어야 하고 글자크기별로 가로크기 정해야 하고 여간 귀찮은게 아닙니다.

그래서 꼼수를 좀 부려 조금은 편하게 하는 방법을 생각해 봤습니다.

먼저 html 이 아래와 같이 있다 가정합니다.

[code]

<strong>IT·프로그래밍</strong> 개발 강의

[/code]

여기서 "IT" 라는 글자에만 윗선을 긋고 싶습니다.  긋고 싶은 곳에 "<span class="accent">IT</span>" 요렇게 태그로 감싸고 accent 클래스를 줍니다.

[code]

<strong><span class="accent">IT</span>·프로그래밍</strong> 개발 강의

[/code]

그리고 css는 아래와 같이 작성합니다.  선굵기는 border-top 항목에서 적절히 수정해 주세요

[code]

.accent {
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-end;
  vertical-align: bottom;
  border-top: 5px solid #000;
}

[/code]

간단하쥬?

라인을 2개 넣어 볼까요?

[code]

<strong><span class="accent">IT</span>·프로그래밍</strong> <span class="accent">개발</span> 강의

[/code]

잘됩니다 ^^;;;