[CSS] 텍스트 취소선과 라인 굵기 조절 방법

 

1. CSS에서 텍스트에 취소선 적용하기

웹 개발 시 텍스트에 취소선을 적용하는 방법은 주로 text-decoration 속성을 활용하는 것입니다. CSS에서 기본적으로 제공하는 text-decoration: line-through; 속성을 사용하면 손쉽게 취소선을 추가할 수 있습니다.

(1) 기본 취소선 적용

.strikethrough {
    text-decoration: line-through;
}

<p class="strikethrough">이 텍스트에는 취소선이 적용되었습니다.</p>

결과: 이 텍스트에는 취소선이 적용되었습니다.

2. 취소선의 스타일 조절하기

CSS3부터 text-decoration 속성과 함께 text-decoration-thickness, text-decoration-color, text-decoration-style 등의 속성을 활용하여 취소선의 굵기, 색상 및 스타일을 조절할 수 있습니다.

(1) 취소선 색상 변경

.strikethrough-red {
    text-decoration: line-through;
    text-decoration-color: red;
}

<p class="strikethrough-red">이 텍스트에는 빨간색 취소선이 적용되었습니다.</p>

결과: 이 텍스트에는 빨간색 취소선이 적용되었습니다.

(2) 취소선 굵기 조절

.strikethrough-thick {
    text-decoration: line-through;
    text-decoration-thickness: 3px;
}

<p class="strikethrough-thick">이 텍스트에는 굵은 취소선이 적용되었습니다.</p>

결과: 취소선이 두껍게 표시됨

(3) 점선/이중선 스타일 적용

.strikethrough-dashed {
    text-decoration: line-through;
    text-decoration-style: dashed;
}

.strikethrough-double {
    text-decoration: line-through;
    text-decoration-style: double;
}

<p class="strikethrough-dashed">이 텍스트에는 점선 취소선이 적용되었습니다.</p>
<p class="strikethrough-double">이 텍스트에는 이중선 취소선이 적용되었습니다.</p>

결과: 점선 및 이중선 취소선이 각각 적용됨

3. ::after 또는 ::before를 활용한 커스텀 취소선 만들기

취소선을 더 자유롭게 스타일링하려면 ::after 또는 ::before 가상 요소를 활용하여 직접 선을 추가할 수도 있습니다.

(1) ::after를 사용한 커스텀 취소선

.strikethrough-custom {
    position: relative;
    display: inline-block;
}

.strikethrough-custom::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: black;
}

<p class="strikethrough-custom">이 텍스트에는 커스텀 취소선이 적용되었습니다.</p>

결과: 텍스트 중앙에 커스텀 취소선이 적용됨

4. 취소선을 애니메이션 효과와 함께 적용하기

취소선을 점진적으로 나타나게 하거나 동적인 효과를 추가할 수도 있습니다.

(1) 애니메이션 취소선 적용

@keyframes strikeThrough {
    from { width: 0; }
    to { width: 100%; }
}

.strikethrough-animate {
    position: relative;
    display: inline-block;
}

.strikethrough-animate::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 2px;
    background-color: red;
    animation: strikeThrough 1s forwards;
}

<p class="strikethrough-animate">이 텍스트에는 애니메이션 취소선이 적용됩니다.</p>

결과: 취소선이 왼쪽에서 오른쪽으로 점진적으로 나타남

 

궁금하신게 있으시면 댓글 달아주세요.
이 글이 도움이 되었다면 ♡(공감), 광고 눌러 주세요.
큰 도움이 됩니다.