CSS는 텍스트와 다른 색으로 표현됩니까?

268

는 HTML 요소 del, strike또는 s모든 효과 취소 선 텍스트에 사용될 수있다. 예 :

<del>del</del>

.... 제공 : 델

<strike>strike</strike> and <s>strike</s>

.... 제안 : 파업 과 파업

text-decoration값 line-through이있는 CSS 속성 도 비슷하게 사용할 수 있습니다. 코드...

<span style='text-decoration:line-through'>
    text-decoration:line-through
</span>

... 또한 다음과 같이 렌더링됩니다 : ~~text-decoration : line-through~~

그러나 취소 선은 일반적으로 텍스트와 같은 색입니다.

CSS를 사용하여 선을 다른 색으로 만들 수 있습니까?

html css

— 고조모
소스

효과를 통해 투명 파업를 들어 볼 수있는 투명 텍스트에 strikethrought

— 웹 티키

408

추가 포장 요소를 추가하여 가능합니다. 원하는 라인 스루 색상을 외부 요소에 지정한 다음 원하는 텍스트 색상을 내부 요소에 지정하십시오. 예를 들면 다음과 같습니다.

<span style='color:red;text-decoration:line-through'>
  <span style='color:black'>black with red strikethrough</span>
</span>

스 니펫 확장

...또는...

<strike style='color:red'>
  <span style='color:black'>black with red strikethrough<span>
</strike>

스 니펫 확장

(참고, 그러나, <strike>있다 HTML5에 HTML4에서 사용되지 않으며 사용되지 않는 것으로 간주 ( 도 W3.org 참조 ). 권장되는 방법은 사용하는 것입니다 <del>삭제의 진정한 의미를 의도하거나, 그렇지 않으면 사용하는 경우 <s>와 요소 나 스타일을 text-decoration같이 CSS 첫 번째 예입니다.)

취소 선이 a : 호버에 표시되도록하려면 명시 적 스타일 시트 (에서 선언되거나 참조 된 <HEAD>)를 사용해야합니다. 합니다 ( :hover의사 클래스는 인라인 스타일 속성에 적용 할 수 없습니다.) 예를 들면 :

<head>
  <style>
    a.redStrikeHover:hover {
      color:red;
      text-decoration:line-through;
    }
  </style>
</head>
<body>
  <a href='#' class='redStrikeHover'>
    <span style='color:black'>hover me</span>
  </a>
</body>

스 니펫 확장

(IE7은 이전 href에 일부 를 설정 해야하는 것으로 보이지만 FF 및 WebKit 기반 브라우저는 효과가 없습니다.)<a>:hover

— 고조모
소스

8

내 "그건 불가능 해!" 대답.

— John Kugelman

1

Jquery 구현은 매우 유용합니다.

— yakunins

38

@utype 왜 이것을 위해 jQuery를 사용 하시겠습니까?

— kapa

4

래퍼 요소는 좀 짜증나. 대부분의 경우 간단한 의사 요소, 즉 del { position:relative }and를 사용 하여 거의 동일한 효과를 얻을 수 있습니다 del::after { content:'', position:absolute; top: 50%; left: 0; right:0; border-bottom: 1px solid #f00 }.

— 화신

2

랩퍼 일뿐입니다. 영리한. 오 마이 갓, 내가 생각 해낸 모든 것 (의사 요소)보다 낫다. 잘 했어!

— CunningFatalist

69

2016 년 2 월 기준 으로 CSS 3는 아래에 언급 된 지원을 제공합니다. 다음은 WooCommerce의 단일 제품 페이지에서 가격 할인이 적용된 스 니펫입니다.

/*Price before discount on single product page*/
body.single-product .price del .amount {
color:           hsl(0, 90%, 65%);
font-size:       15px;
text-decoration: line-through;
/*noinspection CssOverwrittenProperties*/
text-decoration: white double line-through; /* Ignored in CSS1/CSS2 UAs */
}

를 야기하는:

CSS 3은이 text-decoration-color속성을 사용하여 직접 지원할 것 입니다. 특히:

text-decoration-colorCSS 속성은 밑줄, overlines 그리기, 또는 파업 스루에 의해 지정된 때 사용되는 색상을 설정합니다 text-decoration-line. 다른 HTML 요소의 조합을 사용하는 대신 이러한 텍스트 장식을 색칠하는 데 선호되는 방법입니다.

text-decoration-colorCSS 3 draft spec 도 참조하십시오 .

이 메소드를 즉시 사용하려면을 사용하여 접 두부를 붙여야합니다 -moz-text-decoration-color. ( -moz-앞으로 호환성을 위해, 없이도 지정하십시오 .)

— 기계 달팽이
소스

2

"CSS 3은 아마도 ..."낙관적 일 것입니다.

— BoltClock

5

@BoltClock : 낙관적입니까? 이미 W3C 작업 초안에 있으며 적극적으로 추진 중입니다.

— 기계 달팽이

2

caniuse 에 따르면 현재 (2014 년) text-decoration-color접두사 가없는 브라우저는 지원 하지 않습니다.

— Blazemonger

4

그리고 3 년 후 ... 파이어 폭스와 사파리의 도달 거리는 20 %입니다.

— André Werlang

1

caniuse에 따르면, 현재 FireFox에서만 지원됩니다

— YakovL

35

나는 빈 :after요소를 사용하고 그 위에 하나의 테두리를 장식했습니다. CSS 변환을 사용하여 기울어 진 선을 위해 회전 할 수도 있습니다. 결과 : 순수한 CSS, 추가 HTML 요소가 없습니다! 단점 : IMO는 어쨌든 큰 텍스트 블록에 취소 선을 사용해서는 안되지만 여러 줄로 줄 바꿈되지는 않습니다.

s,
strike {
  text-decoration: none;
  /*we're replacing the default line-through*/
  position: relative;
  display: inline-block;
  /* keeps it from wrapping across multiple lines */
}

s:after,
strike:after {
  content: "";
  /* required property */
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 2px solid red;
  height: 45%;
  /* adjust as necessary, depending on line thickness */
  /* or use calc() if you don't need to support IE8: */
  height: calc(50% - 1px);
  /* 1px = half the line thickness */
  width: 100%;
  transform: rotateZ(-4deg);
}

<p>Here comes some <strike>strike-through</strike> text!</p>

스 니펫 확장

— 블레이즈 몬거
소스

@Veve HTML 취소 선 요소 -비의

— 미적

1

덕분에 나는이 위해 특별히 회전 라인 보았다

— 하난-mstudio을

사용 : 방법은 접근성에 문제가있을 가능성이 후

— ewanm89

9

Internet Explorer \ edge에 신경 쓰지 않으면 취소 선에 대해 다른 색상을 얻는 가장 간단한 방법은 CSS 속성을 사용하는 것입니다. text-decoration-color 와 함께 text-decoration -color ;

.yourClass {
    text-decoration: line-through !important;
    text-decoration-color: red !important;
}

-Edge \ Internet Explorer에서 작동하지 않습니다

— 로힌 탁
소스

7

이 CSS3를 사용하면 더 쉽게 속성을 탐색하고 작업 할 수 있습니다.

span{
    text-decoration: line-through;
    text-decoration-color: red;
}

— 비슈누 SR
소스

6

@gojomo에 추가하면 추가 :after요소에 의사 요소를 사용할 수 있습니다 . 단주의해야 할 점은 당신이 당신을 정의해야한다는 것입니다 innerTextA의 data-textCSS가 제한되어 있기 때문에 속성 content기능을.

s {
  color: red;
  text-align: -1000em;
  overflow: hidden;
}
s:after {
  color: black;
  content: attr(data-text);
}

<s data-text="Strikethrough">Strikethrough</s>

스 니펫 확장

— 이 볼모
소스

5

그라디언트를 사용하여 선을 위조하는 접근법이 있습니다. 여러 줄로 표시되며 추가 DOM 요소가 필요하지 않습니다. 그러나 배경 그라디언트이므로 텍스트 뒤에 있습니다 ...

del, strike {
  text-decoration: none;
  line-height: 1.4;
  background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.63em, transparent), color-stop(0.63em, #ff0000), color-stop(0.7em, #ff0000), color-stop(0.7em, transparent), to(transparent));
  background-image: -webkit-linear-gradient(top, transparent 0em, transparent 0.63em, #ff0000 0.63em, #ff0000 0.7em, transparent 0.7em, transparent 1.4em);
  background-image: -o-linear-gradient(top, transparent 0em, transparent 0.63em, #ff0000 0.63em, #ff0000 0.7em, transparent 0.7em, transparent 1.4em);
  background-image: linear-gradient(to bottom, transparent 0em, transparent 0.63em, #ff0000 0.63em, #ff0000 0.7em, transparent 0.7em, transparent 1.4em);
  -webkit-background-size: 1.4em 1.4em;
  background-size: 1.4em 1.4em;
  background-repeat: repeat;
}

피들 참조 : http://jsfiddle.net/YSvaY/

그라디언트 색상 정지 및 배경 크기는 선 높이에 따라 다릅니다. (나는 나중에 계산 및 자동 접두사에 LESS를 사용했습니다 ...)

— 심보
소스

4

여기 있습니다 :

<style>body {color: #000;}</style>
<del>&nbsp;&nbsp;<span style="color:#999">facebook</span>&nbsp;&nbsp;</del>

스 니펫 확장

— 유진 카 다쉬
소스

3

내 경험상

<span style='color:red;text-decoration:line-through'>
    <span style='color:black'>black with red strikethrough</span>
</span>

최선의 선택은 아닙니다. 공동 작업자에게 크로스 브라우저를 테스트하지 않고이 방법을 사용하게되었으므로 파이어 폭스에 문제가 발생하여 돌아가서 수정해야했습니다. 내 개인적인 추천은 : after 선택기를 사용하여 취소 선을 만드는 것입니다. 그렇게하면 다른 모든 브라우저에서 스타일 충돌이없고 견고하게 원한다면 IE8로 돌아갈 수 있습니다.

그것은 또한 내 생각에 꽤 큰 마크 업과 같은 양의 스타일링을 줄입니다.

따라서 다른 사람이 비슷한 문제를 겪으면 희망이 있습니다.

.lineThrough {
    position: relative;

   &:after {
      content: "  ";
      display: block;
      width: 60px;
      height: 1px;
      background: red;
      position: absolute;
      top: 49%;
      left: 50%;
      margin-left: -30px;
   }
}

분명히 여백 대신 transform : translate를 사용할 수 있지만이 예제는 IE8로 다시 돌아가는 것입니다.

— 브래디 에드가
소스

2

Blazemonger의 답변 (위 또는 아래)에는 투표가 필요하지만 충분한 점수가 없습니다.

"사용할 수 없음"을 표시하고 Blazemonger의 CSS를 조정하기 위해 20px 너비의 CSS 라운드 버튼에 회색 막대를 추가하고 싶었습니다.

.round_btn:after {
    content:"";    /* required property */
    position: absolute;
    top: 6px;
    left: -1px;
    border-top: 6px solid rgba(170,170,170,0.65);
    height: 6px;
    width: 19px;
}

— 아놀드 마크
소스

0

원하는 라인 스루 색상을 부모 요소에 지정하면 삭제 된 텍스트 요소 ( <del>)에도 적용되며 클라이언트 <del>가 라인 스루로 렌더링 한다고 가정합니다 .

http://jsfiddle.net/kpowz/vn9RC/

— 크로우즈
소스

-4

다음은 고조모의 답변과 utype의 제안 덕분에 샘플 jQuery 구현입니다 (둘 다 +1).

$(function(){
  //===================================================================
  // Special price strike-out text
  // Usage:
  //   Normally:    <span class='price'>$59</span>
  //   On special:  <span class='price' special='$29'>$59</span>
  //===================================================================
  $(".price[special]").each(function() {
    var originalPrice = $(this).text();
    $(this).html('<strike><span>' + originalPrice +'</span></strike> ' + $(this).attr('special'))
           .removeAttr('special')
           .addClass('special');
  });
});

그에 대한 CSS는

.price strike, .price.special { color: Red; }
.price strike span { color: Black; }

— 악시 밀리
소스

어떤 부분이 유효하지 않습니까? 그것은 비록 모든 주요 브라우저에서 작동했습니다

— Aximili

3

"Works"와 "valid"는 서로 아주 멀리 떨어져 있습니다. 브라우저는 몇 가지 오류가있는 HTML조차도 해석하려고합니다. W3C 마크 업 검증 서비스를 참조하십시오 . 왜 모든 사람에게 유효한 HTML이 중요한가요? , HTML 유효한 DIV 속성? 에 SO

— kapa

내가 실수하지 않으면 속성 이름을 "data-special"으로 변경하면 HTML5가 유효 해집니다.

— Muhd

13

컬러 스트라이크 스루를 얻기 위해 래퍼를 추가하는 jQuery? 우리는 무엇이 되었습니까?!

— Chris Baker

3

가능한 XSS 문제인 것 같습니다 :에 일반 텍스트가 originalPrice있고 HTML로 다시 삽입하십시오. .html()대신에 사용해보십시오 .text(). 또는 jQuery를 사용하십시오 wrap().

— tuomassalo