CSS dicoret melalui warna berbeda dari teks?

269

Elemen HTML del, strikeatau smungkin semua akan digunakan untuk teks pemogokan-melalui efek. Contoh:

<del>del</del>

.... memberikan: ~~del~~

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

.... memberikan: ~~pukulan~~ dan ~~pukulan~~

text-decorationProperti CSS dengan nilai line-throughdapat digunakan dengan cara yang sama. Kode...

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

... juga akan ditampilkan seperti: ~~dekorasi teks: line-through~~

Namun, garis coret biasanya berwarna sama dengan teks.

Bisakah CSS digunakan untuk membuat garis warna berbeda?

html css gojomo
sumber

Untuk pemogokan transparan melalui efek, Anda dapat melihat lapisan transparan pada teks

web-tiki

409

Ya, dengan menambahkan elemen pembungkus tambahan. Tetapkan warna garis yang diinginkan ke elemen luar, lalu warna teks yang diinginkan ke elemen dalam. Sebagai contoh:

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

Luaskan cuplikan

...atau...

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

Luaskan cuplikan

(Catatan, bagaimanapun, bahwa <strike>yang dianggap usang di HTML4 dan usang dalam HTML5 ( lihat juga W3.org ). Pendekatan yang direkomendasikan adalah dengan menggunakan <del>jika makna sebenarnya dari penghapusan dimaksudkan, atau menggunakan <s>unsur atau gaya dengan text-decorationCSS seperti di contoh pertama di sini.)

Untuk membuat coretan muncul untuk: hover, stylesheet eksplisit (dideklarasikan atau dirujuk <HEAD>) harus digunakan. (Kelas :hoverpseudo tidak dapat diterapkan dengan atribut STYLE inline.) Misalnya:

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

Luaskan cuplikan

(IE7 tampaknya membutuhkan beberapa hrefbe set pada <a>sebelum :hovermemiliki efek; FF dan WebKit berbasis browser tidak.)

gojomo
sumber

8

Begitu banyak untuk "itu tidak mungkin!" menjawab.

John Kugelman

1

Implementasi jquery akan sangat berguna.

yakunins

38

@ utype Mengapa Anda menggunakan jQuery untuk ini?

kapa

4

Elemen bungkus agak menghisap. Dalam kebanyakan kasus, Anda dapat mencapai efek yang hampir sama dengan pseudoelement sederhana, yaitu del { position:relative }lalu del::after { content:'', position:absolute; top: 50%; left: 0; right:0; border-bottom: 1px solid #f00 }.

Menjelma

2

Hanya pembungkus. Berbakat. Ya Tuhan, itu lebih baik dari semua yang saya dapatkan (elemen semu). Kerja bagus!

CunningFatalist

69

Pada Februari 2016 , CSS 3 memiliki dukungan yang disebutkan di bawah ini. Berikut ini cuplikan dari halaman produk tunggal WooCommerce dengan diskon harga

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

Yang menghasilkan:

CSS 3 kemungkinan akan memiliki dukungan langsung menggunakan text-decoration-colorproperti . Khususnya:

The text-decoration-colorproperti CSS menetapkan warna yang digunakan ketika menggambar garis bawah, overlines, atau pemogokan-throughs yang ditentukan oleh text-decoration-line. Ini adalah cara yang disukai untuk mewarnai dekorasi teks ini, daripada menggunakan kombinasi elemen HTML lainnya.

Juga lihat text-decoration-colordi spec draft CSS 3 .

Jika Anda ingin segera menggunakan metode ini, Anda mungkin harus awalan, menggunakan -moz-text-decoration-color. (Juga tentukan tanpa -moz-, untuk kompatibilitas ke depan.)

Siput mekanik
sumber

2

"CSS 3 kemungkinan akan memiliki" agak ... optimis.

BoltClock

5

@BoltClock: Bagaimana optimisnya? Ini sudah ada dalam draft kerja W3C, yang sedang dikejar secara aktif.

Mekanik siput

2

Menurut caniuse , saat ini tidak ada browser yang mendukung ( text-decoration-colortanpa 2014) .

Blazemonger

4

Dan 3 tahun kemudian ... Firefox dan Safari memilikinya = 20% dari jangkauan.

André Werlang

1

menurut caniuse, saat ini hanya didukung oleh FireFox

YakovL

35

Saya telah menggunakan :afterelemen kosong dan menghiasi satu pembatas di atasnya. Anda bahkan dapat menggunakan transformasi CSS untuk memutarnya untuk garis miring. Hasil: CSS murni, tanpa elemen HTML tambahan! Kelemahan: tidak membungkus beberapa baris, meskipun IMO Anda tidak harus menggunakan dicoret pada blok teks yang besar pula.

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>

Luaskan cuplikan

Blazemonger
sumber

@Veve elemen dicoret HTML - versi non-semantik

Blazemonger

1

terima kasih, saya mencari ini, khususnya garis putar

hanan-mstudio

Menggunakan metode: setelah kemungkinan memiliki masalah dengan aksesibilitas

ewanm89

9

Jika Anda tidak peduli dengan internet explorer \ edge, maka cara paling sederhana untuk mendapatkan warna berbeda untuk strike-through adalah dengan menggunakan properti CSS: text-decoration-color dalam hubungannya dengan text-decoration: line-through;

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

- Tidak berfungsi dengan Edge \ Internet Explorer

Rohin Tak
sumber

7

CSS3 ini akan membuat Anda menelusuri properti lebih mudah, dan berfungsi dengan baik.

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

Wisnu SR
sumber

6

Menambahkan ke @gojomo Anda bisa menggunakan :afterelemen pseudo untuk elemen tambahan. Satu-satunya pengecualian adalah bahwa Anda harus mendefinisikan Anda innerTextdalam data-textatribut sejak CSS telah membatasi contentfungsi.

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

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

Luaskan cuplikan

ibolmo
sumber

5

Berikut ini pendekatan yang menggunakan gradien untuk memalsukan garis. Ia bekerja dengan serangan multiline dan tidak memerlukan elemen DOM tambahan. Tapi karena gradien latar belakang, itu di belakang teks ...

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

Lihat biola: http://jsfiddle.net/YSvaY/

Perhentian warna dan ukuran latar belakang gradien tergantung pada ketinggian garis. (Saya menggunakan KURANG untuk perhitungan dan Autoprefixer sesudahnya ...)

simbo
sumber

4

Ini dia:

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

Luaskan cuplikan

Eugene Kardash
sumber

3

Dalam pengalaman saya itu

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

bukan pilihan terbaik. Saya memiliki rekan kerja menggunakan metode ini tanpa menguji lintas browser, jadi saya harus kembali dan memperbaikinya karena menyebabkan masalah di firefox. Rekomendasi pribadi saya adalah menggunakan: setelah pemilih untuk membuat coretan. Dengan begitu ia dapat kembali ke IE8 jika Anda benar-benar ingin tanpa konflik gaya serta solid di semua browser lainnya.

Ini juga membuat markup lebih sedikit dan jumlah styling yang kira-kira sama yang menurut saya merupakan masalah yang cukup besar.

Jadi, jika ada orang lain yang mengalami masalah serupa semoga ini dapat membantu:

.lineThrough {
    position: relative;

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

jelas Anda bisa menggunakan transform: translate alih-alih margin, tetapi contoh ini adalah untuk bekerja kembali ke IE8

Brady Edgar
sumber

2

Balasan Blazemonger (di atas atau di bawah) perlu dipilih - tetapi saya tidak punya cukup poin.

Saya ingin menambahkan bilah abu-abu di beberapa tombol putaran CSS lebar 20px untuk menunjukkan "tidak tersedia" dan men-tweak caz Blazemonger:

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

0

Menetapkan warna line-through yang diinginkan ke elemen induk juga berfungsi untuk elemen teks yang dihapus ( <del>) - menjadikan asumsi yang dibuat klien <del>sebagai baris-through.

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

kpowz
sumber

-4

Berikut ini contoh implementasi jQuery - berkat jawaban gojomo dan saran utype (+1 untuk keduanya)

$(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 untuk itu bisa saja

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

Aximili
sumber

Bagian mana yang tidak valid? Ini bekerja pada semua browser utama sekalipun

Aximili

3

"Pekerjaan" dan "valid" cukup jauh satu sama lain. Browser mencoba menginterpretasikan bahkan HTML yang memiliki beberapa kesalahan di dalamnya. Lihat Layanan Validasi Markup W3C , Mengapa HTML yang valid penting bagi semua orang? , Atribut DIV HTML yang valid? pada SO

kapa

Jika saya tidak salah, mengubah nama atribut menjadi "data-khusus" harus menjadikannya HTML5 yang valid.

Muhd

13

jQuery untuk menambahkan pembungkus untuk mendapatkan lapisan berwarna? Menjadi apa kita?

Chris Baker

3

Sepertinya ada kemungkinan masalah XSS: Anda memiliki teks biasa originalPrice, lalu menyuntikkannya kembali sebagai HTML. Coba gunakan .html()sebagai ganti .text(). Atau mungkin menggunakan jQuery's wrap().

tuomassalo

CSS dicoret melalui warna berbeda dari teks?

Jawaban: