सीएसएस स्ट्राइकथ्रू पाठ से अलग रंग?

268

HTML तत्वों del, strikeया sसभी का उपयोग पाठ स्ट्राइक-थ्रू प्रभाव के लिए किया जा सकता है। उदाहरण:

<del>del</del>

.... देता है: ~~डेल~~

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

.... देता है: ~~हड़ताल~~ और ~~हड़ताल~~

text-decorationएक मूल्य के साथ सीएसएस संपत्ति line-throughसमान रूप से इस्तेमाल किया जा सकता है। कोड...

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

... यह भी देखने के लिए प्रस्तुत करना होगा: ~~टेक्स्ट-डेकोरेशन: लाइन-थ्रू~~

हालाँकि, स्ट्राइकथ्रू लाइन आम तौर पर टेक्स्ट के समान रंग की होती है।

क्या लाइन को अलग रंग बनाने के लिए CSS का उपयोग किया जा सकता है?

html css

— gojomo
स्रोत

प्रभाव के माध्यम से एक पारदर्शी हड़ताल के लिए, आप पाठ पर पारदर्शी स्ट्राइकथ्रू

— वेब-टिकी

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>है एचटीएमएल 5 में HTML4 में पदावनत और अप्रचलित माना जाता ( भी W3.org देख ) सिफारिश की दृष्टिकोण का उपयोग करने के लिए है। <del>हटाए जाने के सही अर्थ का इरादा है, या अन्यथा एक का उपयोग करने के <s>साथ तत्व या शैली text-decorationमें के रूप में सीएसएस यहां पहला उदाहरण।)

स्ट्राइकथ्रू बनाने के लिए: हॉवर के लिए, एक स्पष्ट स्टाइलशीट (घोषित या संदर्भित <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को <a>पहले :hoverप्रभाव पर सेट करने की आवश्यकता होती है; एफएफ और वेबिट-आधारित ब्राउज़र नहीं करते हैं।)

— gojomo
स्रोत

8

मेरे लिए इतना "यह असंभव है!" जवाब।

— जॉन कुगेलमैन

1

जेकरी कार्यान्वयन बहुत उपयोगी होगा।

— यकुनिन्स

38

@utype आप इसके लिए jQuery का उपयोग क्यों करेंगे?

— पापा

4

रैपर तत्वों थोड़े चूसना। ज्यादातर मामलों में आप साधारण छद्म व्यवस्था के साथ लगभग समान प्रभाव प्राप्त कर सकते हैं, अर्थात del { position:relative }और फिर del::after { content:'', position:absolute; top: 50%; left: 0; right:0; border-bottom: 1px solid #f00 }।

— अवतार

2

सिर्फ एक रैपर। सरल। हे भगवान, यह सब कुछ मैं (छद्म तत्वों) के साथ आया से बेहतर है। अच्छा काम!

— चालाक

69

फरवरी 2016 तक , सीएसएस 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सीएसएस संपत्ति जब रेखांकन, overlines ड्राइंग, या द्वारा हड़ताल-थ्रू निर्दिष्ट इस्तेमाल किया रंग सेट text-decoration-line। यह अन्य HTML तत्वों के संयोजन का उपयोग करने के बजाय, इन टेक्स्ट सजावट को रंग देने का पसंदीदा तरीका है।

text-decoration-colorसीएसएस 3 ड्राफ्ट युक्ति में भी देखें ।

यदि आप तुरंत इस विधि का उपयोग करना चाहते हैं, तो आपको संभवतः इसका उपयोग करते हुए इसे उपसर्ग करना होगा -moz-text-decoration-color। ( -moz-आगे-संगतता के लिए भी इसे बिना निर्दिष्ट करें ।)

— यांत्रिक घोंघा
स्रोत

2

"सीएसएस 3 की संभावना होगी" बल्कि ... आशावादी है।

— BoltClock

5

@ बॉलकॉक: यह कैसे आशावादी है? यह पहले से ही W3C वर्किंग ड्राफ्ट में है, जिसे सक्रिय रूप से आगे बढ़ाया जा रहा है।

— मैकेनिकल घोंघा

2

कैनीयूज़ के अनुसार , कोई भी ब्राउज़र वर्तमान में (2014 में) text-decoration-colorउपसर्गों के बिना समर्थन नहीं कर रहा है।

— ब्लेज़ेमॉन्गर

4

और 3 साल बाद ... फ़ायरफ़ॉक्स और सफारी में यह = 20% पहुंच है।

— आंद्रे वेरलैंग

1

कैनिएज़ के अनुसार, वर्तमान में केवल फ़ायरफ़ॉक्स द्वारा समर्थित है

— याकॉव

35

मैंने एक खाली :afterतत्व का उपयोग किया है और उस पर एक सीमा को सजाया है। तुम भी एक बदल लाइन के लिए इसे घुमाने के लिए सीएसएस परिवर्तनों का उपयोग कर सकते हैं। परिणाम: शुद्ध 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 स्ट्राइकथ्रू तत्व - गैर-अर्थ संस्करण

— ब्लेज़ेमॉन्गर

1

धन्यवाद, मैंने इसके लिए देखा, विशेष रूप से रोटेट लाइन

— हैनान-मैस्टडियो

उपयोग करने के बाद: विधि के बाद पहुंच के साथ समस्या होने की संभावना है

— ewanm89

9

यदि आप इंटरनेट एक्सप्लोरर / एज की परवाह नहीं करते हैं, तो स्ट्राइक-थ्रू के लिए अलग-अलग रंग प्राप्त करने का सबसे सरल तरीका सीएसएस संपत्ति का उपयोग करना होगा: टेक्स्ट-डेकोरेशन के साथ पाठ-सजावट -रंग : लाइन-थ्रू;

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

- एज \ इंटरनेट एक्सप्लोरर के साथ काम नहीं करता है

— रोहिन टाक
स्रोत

7

यह CSS3 आपको संपत्ति के माध्यम से और अधिक आसान और ठीक काम करने की रेखा बना देगा।

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

— विष्णु एस.आर.
स्रोत

6

@Gojomo में जोड़कर आप :afterअतिरिक्त तत्व के लिए छद्म तत्व का उपयोग कर सकते हैं । केवल चेतावनी है कि आप अपने निर्धारित करने होंगे है innerTextएक में data-textके बाद से सीएसएस सीमित है विशेषता 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 का उपयोग किया और उसके बाद ऑटोप्रिसेसर ...)

— Simbo
स्रोत

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>

सबसे अच्छा विकल्प नहीं है। मेरे पास क्रॉस ब्राउज़र का परीक्षण किए बिना एक सहकर्मी इस पद्धति का उपयोग करता था, इसलिए मुझे वापस जाना पड़ा और इसे ठीक करना पड़ा क्योंकि इससे फ़ायरफ़ॉक्स में समस्याएँ पैदा हुईं। मेरी व्यक्तिगत सिफारिश का उपयोग करना होगा: चयनकर्ता के बाद एक स्ट्राइकथ्रू बनाने के लिए। इस तरह यह 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

ब्लेज़मॉन्ज़र के उत्तर (ऊपर या नीचे) को मतदान की आवश्यकता है - लेकिन मेरे पास पर्याप्त अंक नहीं हैं।

मैं कुछ 20px चौड़े सीएसएस राउंड बटनों में एक ग्रे बार जोड़ना चाहता था ताकि "उपलब्ध न हो" और ब्लेज़ेमॉन्गर के c2 को इंगित कर सके:

.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

अभिभावक तत्व को वांछित लाइन-थ्रू रंग सौंपना, हटाए गए टेक्स्ट एलिमेंट ( <del>) के लिए काम करता है - यह मानकर क्लाइंट रेंडरर्स बनाता है<del> एक लाइन-थ्रू के रूप में करता है।

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

— kpowz
स्रोत

-4

यहाँ एक नमूना 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
स्रोत

कौन सा हिस्सा अमान्य है? यह सभी प्रमुख ब्राउज़रों पर काम करता है

— Aximili

3

"वर्क्स" और "मान्य" एक दूसरे से काफी दूर हैं। ब्राउज़र HTML की व्याख्या करने की भी कोशिश करते हैं जिसमें कई त्रुटियां हैं। W3C मार्कअप सत्यापन सेवा देखें , मान्य HTML सभी के लिए महत्वपूर्ण क्यों है? , HTML मान्य DIV विशेषताएँ? SO

— kapa

यदि मैं गलत नहीं हूं, तो विशेषता नाम को "डेटा-विशेष" में बदलकर इसे वैध HTML5 बना देना चाहिए।

— मुध

13

jQuery एक रंगीन स्ट्राइक-थ्रू प्राप्त करने के लिए एक आवरण जोड़ने के लिए? हम क्या बन गए हैं ?!

— क्रिस बेकर

3

एक संभावित XSS समस्या की तरह लगता है: आपके पास सादा पाठ है originalPrice, फिर इसे HTML के रूप में वापस इंजेक्ट करें। के .html()बजाय का उपयोग करने का प्रयास करें .text()। या शायद jQuery का उपयोग करें wrap()।

— टूमैसालो