CSS metinden farklı bir renk üzerinde?

268

HTML öğeleri del, strikeveya stümü bir metin üstü çizme efekti için kullanılabilir. Örnekler:

<del>del</del>

.... verir: ~~del~~

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

.... verir: ~~grev~~ ve ~~grev~~

text-decorationDeğerli CSS özelliği line-throughde benzer şekilde kullanılabilir. Kod ...

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

... ayrıca şu şekilde görünecek: ~~metin dekorasyonu: satır sonu~~

Ancak, üstü çizili çizgi tipik olarak metinle aynı renktedir.

CSS çizgiyi farklı bir renk yapmak için kullanılabilir mi?

html css

— gojomo
kaynak

Etkisi ile şeffaf bir grev için , metin üzerinde şeffaf üstü çizili

— web-tiki

408

Evet, fazladan bir sarma elemanı ekleyerek. Dış öğeye istenen çizgi rengini, ardından iç öğeye istenen metin rengini atayın. Örneğin:

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

Snippet'i genişlet

...veya...

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

Snippet'i genişlet

(Bununla birlikte, bunun HTML4'te kullanımdan kaldırıldığı ve HTML5'te eski<strike> olduğu kabul edilir ( ayrıca bkz . W3.org ) Önerilen yaklaşım, <del>gerçek bir silme anlamı amaçlanıyorsa veya başka bir şekilde bir <s>öğeyi veya stili text-decorationCSS ile olduğu gibi kullanmaktır. buradaki ilk örnek.)

Üstü çizili öğenin: hover için görünmesini sağlamak için açık bir stil sayfası (bildirilen veya başvurulan <HEAD>) kullanılmalıdır. ( :hoverSözde sınıf, satır içi STYLE öznitelikleriyle uygulanamaz.) Örneğin:

<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>

Snippet'i genişlet

(IE7 href, daha <a>önce ayarlanmış :hoverbir etki gerektiriyor gibi görünüyor ; FF ve WebKit tabanlı tarayıcılar yok.)

— gojomo
kaynak

8

"Bu imkansız!" Cevap.

— John Kugelman

1

Jquery uygulaması çok faydalı olacaktır.

— yakunins

38

@utype Bunun için neden jQuery kullanıyorsunuz?

— 12'de

4

Sarma elemanları biraz emmek. Çoğu durumda, hemen hemen aynı etkiyi basit sözde, yani del { position:relative }ve sonra elde edebilirsiniz del::after { content:'', position:absolute; top: 50%; left: 0; right:0; border-bottom: 1px solid #f00 }.

— enkarne

2

Sadece bir sarıcı. Ustaca. Aman tanrım, bulduğum her şeyden daha iyi (sözde unsurlar). İyi iş!

— KurnazFatalist

69

Şubat 2016 itibariyle , CSS 3 aşağıda belirtilen desteğe sahiptir. WooCommerce'in tek ürün sayfasından fiyat indirimi içeren bir pasaj

/*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 */
}

Sonuçlanan:

CSS 3 muhtemelen text-decoration-colorözelliği kullanarak doğrudan desteğe sahip olacaktır . Özellikle:

text-decoration-colorCSS özelliği altçizgilerini, overlines çizim veya grev dönüşümleriyle tarafından belirtilen kullanılan rengi belirler text-decoration-line. Bu, diğer HTML öğelerinin birleşimlerini kullanmak yerine bu metin süslemelerini renklendirmek için tercih edilen yoldur.

Ayrıca bkz text-decoration-color. CSS 3 taslak şartnamesi .

Bu yöntemi hemen kullanmak istiyorsanız, muhtemelen önekini kullanmanız gerekir -moz-text-decoration-color. (Ayrıca -moz-, ileri uyumluluk için belirtmeden belirtin .)

— Mekanik salyangoz
kaynak

2

"CSS 3 muhtemelen sahip olacak" oldukça iyimser.

— BoltClock

5

@BoltClock: Nasıl iyimser? Zaten aktif olarak takip edilen W3C çalışma taslağında.

— Mekanik salyangoz

2

Caniuse'a göre , şu anda (2014'te) text-decoration-colorhiçbir önek olmadan tarayıcı desteklenmiyor .

— Blazemonger

4

Ve 3 yıl sonra ... Firefox ve Safari'de = erişimin% 20'si var.

— André Werlang

1

caniuse göre, şu anda sadece FireFox tarafından desteklenmektedir

— YakovL

35

Boş bir :aftereleman kullandım ve üzerinde bir sınır süsledim. Eğimli bir çizgi için döndürmek için CSS dönüşümlerini bile kullanabilirsiniz. Sonuç: saf CSS, fazladan HTML öğesi yok! Dezavantajı: IMO olmasına rağmen, büyük metin bloklarında üstü çizilmemelidir.

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>

Snippet'i genişlet

— Blazemonger
kaynak

@Veve HTML üstü çizili öğe - semantik olmayan sürüm

— Blazemonger

1

teşekkürler, ben bu, özellikle döndürme hattı

— aradı

A: after yönteminin erişilebilirlikle ilgili sorunları olması muhtemeldir

— ewanm89

9

Eğer internet explorer \ edge umursamıyorsanız, o zaman grev-geçiş için farklı renk elde etmek için en basit yolu CSS özelliği kullanmak olacaktır: metin-dekorasyon-renk metin-dekorasyon ile birlikte: line-through;

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

- Edge \ Internet Explorer ile çalışmaz

— Rohin Tak
kaynak

7

Bu CSS3 özelliği daha kolay ve iyi çalışmanızı sağlar.

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

— Vishnu SR
kaynak

6

@Gojomo'ya eklediğinizde :after, ek öğe için sözde öğe kullanabilirsiniz . Tek uyarı, CSS'nin sınırlı işlevleri innerTextolduğu için bir data-textnitelikte tanımlamanız gerekmesidir content.

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

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

Snippet'i genişlet

— ibolmo
kaynak

5

İşte çizgiyi taklit etmek için bir degrade kullanan bir yaklaşım. Çok satırlı grevlerle çalışır ve ek DOM öğelerine ihtiyaç duymaz. Ancak arka plan gradyanı olduğu için metnin arkasında ...

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;
}

Keman bakın: http://jsfiddle.net/YSvaY/

Degrade renk durakları ve arka plan boyutu satır yüksekliğine bağlıdır. (Daha sonra hesaplama için LESS ve daha sonra Otomatik Düzeltici kullandım ...)

— Simbo
kaynak

4

Hadi bakalım:

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

Snippet'i genişlet

— Eugene Kardash
kaynak

3

Benim tecrübelerime göre

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

en iyi seçenek değil. Bir tarayıcı çalışanı çapraz tarayıcı test etmeden bu yöntemi kullanmak vardı, bu yüzden geri dönüp onu firefox'ta sorunlara neden olduğu için düzeltmek zorunda kaldım. Kişisel tavsiyem, üstü çizili oluşturmak için: after selector öğesini kullanmak olacaktır. Bu şekilde herhangi bir stil çatışması olmadan ve diğer tüm tarayıcılarda sağlamlaşmak istiyorsanız IE8'e geri dönebilir.

Ayrıca daha az biçimlendirme ve bence oldukça büyük bir anlaşma olan aynı miktarda stil yaratıyor.

Bu yüzden başka biri benzer sorunlarla karşılaşırsa umarım bu yardımcı olabilir:

.lineThrough {
    position: relative;

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

Açıkçası marginler yerine transform: translate kullanabilirsiniz, ancak bu örnek IE8'e geri dönmek

— Brady Edgar
kaynak

2

Blazemonger'ın cevabının (üstte veya altta) oy vermesi gerekiyor - ancak yeterli puanım yok.

Bazı 20 piksel genişliğinde CSS yuvarlak düğmeleri arasında "mevcut değil" belirtmek için gri çubuk eklemek istedim ve Blazemonger'ın css tweaked:

.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;
}

— anoldermark
kaynak

0

Üst öğeye istenen çizgi rengini atamak, silinen metin öğesi ( <del>) için de işe yarar - istemcinin oluşturduğu varsayımını yapar<del> bir çizgi geçişi olarak yapar.

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

— kpowz
kaynak

-4

İşte örnek bir jQuery uygulaması - gojomo'nun yanıtı ve utype'ın önerisi sayesinde (her ikisi için +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');
  });
});

Bunun için CSS olabilir

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

— Aximili
kaynak

Hangi kısım geçersiz? Yine de tüm büyük tarayıcılarda çalıştı

— Aximili

3

"Eserler" ve "geçerli" birbirlerinden oldukça uzak. Tarayıcılar, içinde birkaç hata bulunan HTML'yi bile yorumlamaya çalışır. Bkz. W3C İşaretleme Doğrulama Hizmeti , Geçerli HTML neden herkes için önemlidir? , HTML geçerli DIV özellikleri? SO

— kapa

Yanılmıyorsam, öznitelik adını "data-special" olarak değiştirmek, geçerli HTML5 olmasını sağlar.

— Muhd

13

jQuery renkli bir grev almak için bir sarıcı eklemek için? Ne olduk ?!

— Chris Baker

3

Olası bir XSS sorunu gibi görünüyor: Düz metniniz var originalPrice, sonra tekrar HTML olarak enjekte edin. .html()Bunun yerine kullanmayı deneyin .text(). Ya da belki jQuery's kullanın wrap().

— tuomassalo