범위 및 CSS를 사용하여 텍스트 뒤에 두꺼운 밑줄을 어떻게 만들 수 있습니까?

Span과 CSS를 사용하여 텍스트 뒤에 두꺼운 밑줄

Span과 CSS를 사용하여 "ABC" 텍스트 뒤에 두꺼운 밑줄을 만들고 싶습니다. 색상이 지정된 하단 테두리가 있는 중첩 범위를 사용하여 텍스트 아래에 밑줄을 표시하는 데 성공했지만 텍스트 뒤와 텍스트 기준선 위에 배치하는 데 어려움을 겪고 있습니다.

다음은 밑줄을 표시하는 또 다른 접근 방식입니다. 원하는 효과:

CSS:

p {
  font-size: 100px;
  font-family: arial;
}

span {
  padding: 0 10px;
  box-shadow: inset 0 -0.4em 0 0 magenta;
}

span:nth-child(2) {
  box-shadow: inset 0 -0.55em 0 0 magenta;
}

span:nth-child(3) {
  box-shadow: inset 0 -0.7em 0 0 magenta;
}

HTML:

<p>
  <span>A</span><span>B</span><span>C</span>
</p>

위 내용은 범위 및 CSS를 사용하여 텍스트 뒤에 두꺼운 밑줄을 어떻게 만들 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!