Member Avatar for gertails

Need Response ASAP Thank YOu

  • 7 Contributors
  • 10 Replies
  • 691 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Ezzaral
almostbob commented: post ONCE stop being annoying -3

Dani AI

Generated

Short answer: modern CSS can do a true double strike-through without images. Use text-decoration-line: line-through together with text-decoration-style: double (or the shorthand text-decoration: line-through double <color>). That is part of the CSS text-decoration family and is supported in current browsers. (developer.mozilla.org)

Example (modern):

/* longhand */
.double-strike {
  text-decoration-line: line-through;
  text-decoration-style: double;
  text-decoration-color: currentColor;
}

/* shorthand */
.double-strike2 {
  text-decoration: line-through double currentColor;
}

If the mark is semantic (an edit/delete), prefer the HTML element — it conveys meaning to assistive tech and search engines and can be styled the same way. This echoes what and brought up in the thread. (developer.mozilla.org)

Fallbacks and gotchas: older user agents or print engines may not render double exactly the same, and text-decoration decorations are drawn across descendant text (children cannot “turn off” a parent decoration), so test nesting and multi-line cases. For robust control (and where text-decoration-style isn’t available), a common fallback is to draw two thin lines with pseudo-elements or to use layered linear-gradients as a background — approaches similar to what suggested. Pseudo-element technique (best for single-line inline text):

.fallback-double {
  display: inline-block;
  position: relative;
  color: #000;
}

.fallback-double::before,
.fallback-double::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  pointer-events: none;
}

.fallback-double::before { top: 45%; }
.fallback-double::after  { top: 55%; }

Pseudo-elements are decorative (not exposed as real content), so do not use them to convey semantic information; use <del> when the strike represents deleted content. Test across target browsers and print as needed. ()

Summary: use text-decoration-style: double when possible (cleanest), use <del> for semantic deletions, and fall back to pseudo-elements or gradient backgrounds for older or edge-case environments.

Recommended Answers

All 10 Replies

Member Avatar for almostbob

ASAP (10) + a-hole factor (-100) = cup of coffee and a friendly kmayoyo


:)

dont know a css style to do it
have always used a transparent background with 2 horizontal lines for the span of text

Edited by almostbob because: n/a
Member Avatar for almostbob

the second thread on exactly the same thing, just makes you more of a **expletive**
cease doing it

Member Avatar for Member #905211

I know you can do a single strike through with the text-decoration style, however I don't think you can do a double lined strike through. I think your only choice would be to use a background image.

Member Avatar for twiss

Why would you want to do this? What does it even mean?
http://en.wikipedia.org/wiki/Strikethrough sais it can be used to emphasize words, but if you do so you're stupid (and nobody will understand it).

Member Avatar for Member #905211

Please don't call someone stupid, they may have a need that you do not understand. Also you should spell sais "says", but don't worry, I won't call you stupid.

commented: You're probably right :) +8
Member Avatar for twiss

Well, it's just that it seems weird to me to strike-through words that you find important. And sorry, English is not my native language.

Member Avatar for almostbob

Strike through is used to record edits to the text, struck out and replaced rather than just replaced
double strike through I dunno, what for

Just the OP is an annoying twerp who posts the same question multiple times and demands immediate fixes
screw im

Member Avatar for Airshow

For completeness .....

HTML's <del>...</del> and <ins>...</ins> are included for use as editorial "laymarks".

I have never used either of them.

There's also a very old, now deprecated, tag <s>...</s> for strikethrough.

Whilst <del> generally results in a single strikethrough, W3C leaves it open as to how <del> (and <ins>) markup should be rendered. The HTML 4.01 Recommendation says that, "User agents should render inserted and deleted text in ways that make the change obvious. For instance, inserted text may appear in a special font, deleted text may not be shown at all or be shown as struck-through or with special markings, etc."

As far as I know, no CSS directive will successfully override any browser's rendering of strikethough achieved with either <del> or <s>, though you can add further style directives such as italics, bold, background-color or whatever.

I recall once seeing a suggestion that using a background image was the only way to achieve double strikethrough, as Stbuchok has already said.

Airshow

Edit: Hey, I've just noticed, I'm a "Postaholic"

Edited by Airshow because: n/a
Member Avatar for ko ko

What's your problem ? Post something such question about what you want. It is rather helpful than asking your whole question in post title.

Member Avatar for Ezzaral

Duplicate threads merged. Please excuse the minor discontinuity.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.