Archived

This topic is now archived and is closed to further replies.

  • 0

Different color for line-through

Question

Posted · Report post

I would like to define different color for line-through for <del>line-through</del>, leaving the font color black.  Is it possible?

Share this post


Link to post
Share on other sites

13 answers to this question

Posted · Report post

Hi verglist

I prove the James B solution with background and work fine

del {background-image: url(
);
background-position:center;
background-repeat:repeat-x;}

You can copy this code (the image is upload at Picassa), then you change the image for 1px.png image..... a good one

;)

 

the image is in "lh5.googleusercontent.com/-DmHHlkXANqg/UOddQEHxPuI/AAAAAAAANY4/SQXOJ421xSQ/s720/line%2520red.png" write before de https://

 

Finally you change for

 


del {background-image: url(https:YOUR 1PX IMAGE.png); background-position:center; background-repeat:repeat-x;}

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks for the reply, Catrina, but how to assign it as global CSS rule, instead of wrapping every occurrence in span class?

Share this post


Link to post
Share on other sites

Posted · Report post

Hi vergilst

You can try with:

del { color: red;}

 

Share this post


Link to post
Share on other sites

Posted · Report post

Let us know if Batman's answer works for you

Share this post


Link to post
Share on other sites

Posted · Report post

Hi, Batman.

 

This makes the font color red, not only the strike-through line.

Share this post


Link to post
Share on other sites

Posted · Report post

Try adding the below declaration to the css. If the below doesn't work straight off, try adding !important after the color before the ;

 

{text-decoration-color: #ffffff;}

Share this post


Link to post
Share on other sites

Posted · Report post

Hi James. It seems that the declaration 'text-decoration-color' is not recognized...

Share this post


Link to post
Share on other sites

Posted · Report post

Please try with

del {-moz-text-decoration-color: red !important;
-webkit-text-decoration-color: red !important}

This work fine in Opera and Firefox

Share this post


Link to post
Share on other sites

Posted · Report post

Picked that up from here - https://developer.mozilla.org/en-US/docs/CSS/text-decoration-color

 

W3 schools and similar sites say it can't be done, but thought that might work as its css3 as there are examples of it working online elsewhere. The only other option would be to use a background image like the last post on this thread - http://www.sitepoint.com/forums/showthread.php?471186-How-can-I-change-text-decoration-line-through-color

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Batman. You're right - it works for me in Firefox, but not in Chrome, Opera and Safari.

 

James, I know that this option exists, but I think that it must have a common CSS solution.

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks Batman and James

 

The final solution works fine, just added to your code "text-decoration: none;" in order to remove the default black line.

 

Thanks again.

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks you Verglist, I take note...

"text-decoration: none;"

wpml_mail.gif

Share this post


Link to post
Share on other sites