CSS 텍스트 취소선을 사용하는 방법

CSS 텍스트 취소선은 일반적인 텍스트 스타일 효과로, 텍스트가 삭제되었거나 주석임을 나타내기 위해 텍스트에 수평선을 추가할 수 있습니다.

웹 디자인에서는 CSS 텍스트 취소선이 널리 사용되며 일부 블로그 게시물에서는 작성자가 원본 텍스트 내용을 수정하거나 삭제했음을 나타냅니다. 물론 CSS 텍스트 취소선을 사용하여 특별 가격을 표시하거나 특별히 강조된 텍스트를 만들 수도 있습니다.

구체적으로 CSS 텍스트 취소선에 사용되는 속성은 텍스트 장식이며 그 값은 아래와 같이 줄바꿈입니다.

text-decoration: line-through;

또한 실제 응용 프로그램에서는 CSS 의사 클래스 선택기를 사용하여 더 많은 것을 구현할 수도 있습니다. 유연한 텍스트 취소선.

예를 들어 아래와 같이 데모 ID가 있는 텍스트에 마우스를 올렸을 때 취소선 효과를 추가할 수 있습니다.

#demo:hover {
    text-decoration: line-through;
}

위 코드는 ID가 해당 텍스트에 마우스를 올렸을 때 취소선 효과를 추가한다는 의미입니다. 데모의 경우, 즉 텍스트 위로 마우스를 이동하면 텍스트에 취소선이 나타납니다.

특별한 취소선 스타일을 추가하려면 아래와 같이 CSS 의사 요소 :before 또는 :after를 사용하면 됩니다.

#demo:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    transform: translateY(-50%);
    background-color: #000;
}

위 코드는 텍스트 앞에 취소선 스타일을 추가하는 것을 의미합니다. ID 데모, 취소선 색상은 검정색, 너비는 텍스트 너비 전체를 차지하며 높이는 1픽셀, 위치는 텍스트 중앙에 위치합니다.

CSS 텍스트 취소선을 사용할 때 호환성 문제에도 주의해야 한다는 점에 유의해야 합니다. 브라우저마다 텍스트 장식을 다르게 해석할 수 있으므로 작성 시 브라우저별 스타일 수정 방법을 사용하지 않는 것이 좋습니다.

위 내용은 CSS 텍스트 취소선을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!