아무래도 7note입니다. sup나 sub라면 밑줄이 어긋나므로, 대책 방법을 생각한다

위 첨자를 지정할 수 있습니다 <sup>아래 첨자를 지정하는 <sub> 등이 있습니다만,
이것들에 밑줄을 지정하면 표시가 조금 이상해져 버립니다.

【무너져 버리는 예의 이미지↓】


index.html

<p>水の化学式はH<sub>2</sub>O<sup>※</sup>である</p>

style.css

p {
  text-decoration: underline;
}

이와 같이 sup나 sub에서는 표시 위치가 상하로 어긋나 버리기 때문에 밑줄이 곧바로 계속되지 않습니다.

이것을 똑바로 선을 그리는 방법을 생각해 갑니다.

해결방법①： 텍스트를 모두 이미지로 한다

이미지로 하면 만사 해결이군요. 아무런 문제가 없습니다.
그러나 텍스트의 수정이나 SEO의 일을 생각하면 그다지 최적의 방법이라고는 말할 수 없을 것 같습니다.

해결 방법②: 밑줄을 border나 의사 요소로 재현한다

밑줄이 어긋나는 것은, text-decoration: underline; 를 사용하고 있기 때문에, 이 지정을 사용하지 않고 밑줄을 긋으면 문제 없을 것입니다.

style.css

p {
  line-height: 1.2;  /* borderの位置はline-heightを使って微調整が必要 */
  display: inline-block;
  border-bottom: solid 1px #000;
}

해결방법 ③: vertical-align을 사용하여 표시 위치를 미세 조정(※sub만 해당)

sub에 밖에 사용할 수 없는 방법입니다만, vertical-align의 지정을 바꾸는 것으로 아래에 맞추는 것이 가능합니다.

style.css

sub {
  vertical-align: baseline;
}

타협안①: 대상 부분의 밑줄을 지우기

inline-block 요소를 사용하면 밑줄이 그어지지 않도록 할 수 있습니다.

style.css

sup,sub {
  display: inline-block;
}

밑줄이 벗어난 채보다는 아직 보기 좋네요. 지정이 간단하기 때문에 타협안의 하나로서는 OK일까 생각됩니다.

요약

해결방법 3개 + 타협안 1개를 생각했습니다. 어쩌면 그 밖에도 더 좋은 방법이 있을지도 모르기 때문에, 만약 「이렇게 하면 더 간단하게 밑줄이 깨끗해져!

결론적으로,

<sup>, <sub>

border를 밑줄 바꾸기에 사용할 수 있습니다

inline-block 요소에는 밑줄이 나지 않습니다

이런 곳일까요?
꼭 다른 아이디어라면 코멘트 해주세요.

소마츠!

~ Qiita에서 매일 게시 중!! ~
【초보자용】WEB 제작의 조금 테크 모임