CSS ขีดทับสีที่แตกต่างจากข้อความหรือไม่

268

องค์ประกอบ HTML del, strikeหรือsทั้งหมดอาจถูกนำมาใช้สำหรับข้อความตีผ่านผล ตัวอย่าง:

<del>del</del>

.... ให้: ~~เดล~~

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

.... ให้: การ~~นัดหยุดงาน~~และการ~~นัดหยุดงาน~~

text-decorationคุณสมบัติCSS ที่มีค่าline-throughอาจถูกนำมาใช้ในทำนองเดียวกัน รหัส...

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

... จะแสดงผลเป็น: ~~text-decoration: line-through~~

อย่างไรก็ตามโดยทั่วไปแล้วเส้นขีดกลางมีสีเดียวกันกับข้อความ

CSS สามารถใช้เพื่อทำให้เส้นมีสีต่างกันได้หรือไม่?

html css

— gojomo
แหล่งที่มา

สำหรับการโจมตีที่โปร่งใสโดยใช้เอฟเฟกต์คุณสามารถเห็นการขีดทับแบบโปร่งใสบนข้อความ

— web-tiki

408

ใช่โดยการเพิ่มองค์ประกอบห่อพิเศษ กำหนดสี line-through ที่ต้องการให้องค์ประกอบด้านนอกแล้วสีข้อความที่ต้องการให้องค์ประกอบภายใน ตัวอย่างเช่น:

<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>ถูกพิจารณาว่าไม่สนับสนุนใน HTML4 และล้าสมัยใน HTML5 ( ดู W3.org ด้วย ) วิธีการที่แนะนำคือการใช้<del>หากความหมายที่แท้จริงของการลบมีจุดมุ่งหมายหรือใช้วิธีอื่น<s>องค์ประกอบหรือลักษณะที่มีtext-decorationCSS ในขณะที่ ตัวอย่างแรกที่นี่)

ในการทำให้ strikethrough ปรากฏเป็น: hover <HEAD>จะต้องใช้สไตล์ชีทที่ชัดเจน (ประกาศหรืออ้างอิงใน) ( :hoverไม่สามารถใช้คลาสหลอกกับแอตทริบิวต์ inline STYLE) ตัวอย่างเช่น:

<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มีการตั้งค่าบางอย่าง<a>ก่อนหน้า:hoverนี้จะมีผลกระทบ; เบราว์เซอร์ที่ใช้ FF และ WebKit ไม่ได้ทำ)

— gojomo
แหล่งที่มา

8

มากสำหรับฉัน "ที่เป็นไปไม่ได้!" ตอบ.

— John Kugelman

1

การใช้ jquery จะมีประโยชน์มาก

— yakunins

38

@utype เหตุใดคุณจึงใช้ jQuery ในการทำเช่นนี้

— kapa

4

องค์ประกอบที่ห่อหุ้มครับดูด ในกรณีส่วนใหญ่คุณสามารถบรรลุเกือบผลเช่นเดียวกับ pseudoelement ง่ายเช่นนั้นdel { position:relative } del::after { content:'', position:absolute; top: 50%; left: 0; right:0; border-bottom: 1px solid #f00 }

— จุติลงมา

2

แค่เสื้อคลุม แยบยล โอ้พระเจ้านั่นดีกว่าทุกอย่างที่ฉันคิด (องค์ประกอบแบบหลอก) เยี่ยมมาก!

— CunningFatalist

69

ตั้งแต่กุมภาพันธ์ 2559 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-colorคุณสมบัติ CSS ตั้งค่าสีที่ใช้ในการวาดภาพเมื่อขีดเส้นใต้, overlines text-decoration-lineหรือการนัดหยุดงานผ่านตามที่ระบุไว้ นี่เป็นวิธีที่ต้องการในการตกแต่งสีข้อความเหล่านี้แทนที่จะใช้ชุดค่าผสมขององค์ประกอบ HTML อื่น ๆ

ดูเพิ่มเติมtext-decoration-colorในสเปค CSS 3 ฉบับร่างด้วย

-moz-text-decoration-colorหากคุณต้องการที่จะใช้วิธีการนี้ในทันทีคุณอาจจะมีคำนำหน้ามันใช้ (ระบุด้วยโดยไม่มี-moz-เพื่อความเข้ากันได้ไปข้างหน้า)

— หอยทากเครื่องกล
แหล่งที่มา

2

"CSS 3 น่าจะมี" ค่อนข้างดี ...

— BoltClock

5

@BoltClock: มันเป็นแง่ดีอย่างไร? มันอยู่ในร่างการทำงานของ W3C แล้วซึ่งกำลังถูกติดตามอย่างแข็งขัน

— หอยทากเชิงกล

2

ตามcaniuse , ขณะนี้ไม่มีเบราว์เซอร์ (ในปี 2014) สนับสนุนtext-decoration-colorโดยไม่มีคำนำหน้า

— Blazemonger

4

และ 3 ปีต่อมา ... Firefox และ Safari มีการเข้าถึง = 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>

ขยายตัวอย่างข้อมูล

— Blazemonger
แหล่งที่มา

@Veve HTML strikethrough อิลิเมนต์ - เวอร์ชันที่ไม่ใช่ความหมาย

— Blazemonger

1

ขอบคุณฉันมองหาสิ่งนี้โดยเฉพาะอย่างยิ่งสายหมุน

— hanan-mstudio

การใช้ a: after method น่าจะมีปัญหาเกี่ยวกับการช่วยสำหรับการเข้าถึง

— ewanm89

9

หากคุณไม่สนใจเกี่ยวกับ internet explorer \ edge วิธีที่ง่ายที่สุดในการได้สีที่แตกต่างสำหรับการโจมตีคือการใช้คุณสมบัติ CSS: text-decoration-colorร่วมกับ text-decoration: line-through;

.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องค์ประกอบเทียมสำหรับองค์ประกอบเพิ่มเติม ข้อแม้เพียงว่าคุณจะต้องกำหนดของคุณinnerTextในdata-textแอตทริบิวต์ตั้งแต่ CSS มี จำกัดcontentฟังก์ชั่น

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

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

ขยายตัวอย่างข้อมูล

— ibolmo
แหล่งที่มา

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 สำหรับการคำนวณและ Autoprefixer หลังจากนั้น ... )

— Simbo
แหล่งที่มา

4

ไปเลย:

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

ขยายตัวอย่างข้อมูล

— Eugene Kardash
แหล่งที่มา

3

จากประสบการณ์ของฉัน

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

ไม่ใช่ตัวเลือกที่ดีที่สุด ฉันมีเพื่อนร่วมงานใช้วิธีนี้โดยไม่ต้องทดสอบข้ามเบราว์เซอร์ดังนั้นฉันต้องย้อนกลับไปแก้ไขเพราะมันทำให้เกิดปัญหาใน Firefox คำแนะนำส่วนตัวของฉันจะใช้: หลังจากตัวเลือกเพื่อสร้างขีดฆ่าผ่าน ด้วยวิธีนี้จะสามารถย้อนกลับไปที่ IE8 ได้หากคุณต้องการที่จะไม่มีความขัดแย้งในรูปแบบใด ๆ รวมถึงเบราว์เซอร์อื่น ๆ ทั้งหมด

มันยังสร้างมาร์กอัปที่น้อยลงและการจัดแต่งทรงผมในปริมาณเท่ากันซึ่งในความคิดของฉันเป็นเรื่องใหญ่

ดังนั้นหากใครก็ตามพบปัญหาที่คล้ายกันหวังว่าจะช่วยได้:

.lineThrough {
    position: relative;

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

เห็นได้ชัดว่าคุณสามารถใช้การแปลง: แปลแทนระยะขอบ แต่ตัวอย่างนี้คือการทำงานกลับไปที่ IE8

— เบรดี้เอ็ดการ์
แหล่งที่มา

2

คำตอบของ Blazemonger (ด้านบนหรือด้านล่าง) จำเป็นต้องลงคะแนน แต่ฉันมีคะแนนไม่เพียงพอ

ฉันต้องการเพิ่มแถบสีเทาข้ามปุ่มกลม CSS แบบกว้างขนาด 20px เพื่อระบุ "ไม่พร้อมใช้" และ css Blazemonger ของ 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
แหล่งที่มา

0

การกำหนดสี line-through ที่ต้องการให้กับองค์ประกอบหลักนั้นใช้งานได้กับองค์ประกอบข้อความที่ถูกลบ ( <del>) เช่นกัน - ทำให้สมมติฐานที่ลูกค้าแสดงผล<del>เป็นเส้นผ่าน

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

— kpowz
แหล่งที่มา

-4

นี่คือตัวอย่างการใช้งาน jQuery - ขอบคุณคำตอบของ gojomo และข้อเสนอแนะของ utype (+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
แหล่งที่มา

ส่วนใดไม่ถูกต้อง มันทำงานบนเบราว์เซอร์ที่สำคัญทั้งหมดแม้ว่า

— Aximili

3

"งาน" และ "ใช้ได้" อยู่ค่อนข้างไกลจากกัน เบราว์เซอร์พยายามตีความแม้กระทั่ง HTML ที่มีข้อผิดพลาดหลายประการ ดูW3C Markup ตรวจสอบบริการ , เป็น HTML ที่ถูกต้องทำไมสิ่งสำคัญที่ทุกคนหรือไม่ , HTML แอตทริบิวต์ DIV ถูกต้อง? ใน SO

— kapa

หากฉันไม่เข้าใจผิดการเปลี่ยนชื่อแอตทริบิวต์เป็น "data-special" ควรทำให้ HTML5 นั้นถูกต้อง

— Muhd

13

jQuery เพื่อเพิ่ม wrapper เพื่อให้มีการนัดหยุดงานสี? เรากลายเป็นอะไรไป!

— Chris Baker

3

ดูเหมือนว่าปัญหา XSS ที่เป็นไปได้: คุณมีข้อความธรรมดาoriginalPriceแล้วส่งกลับเป็น HTML ลองใช้แทน.html() .text()หรืออาจจะใช้ของ wrap()jQuery

— tuomassalo