Jump to content
Sign in to follow this  
vergilst

Different color for line-through

Recommended Posts

vergilst    1
vergilst

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

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

Hi vergilst

You can try with:

del { color: red;}

 


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
James B    436
James B

Let us know if Batman's answer works for you


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
vergilst    1
vergilst

Hi, Batman.

 

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

Share this post


Link to post
Share on other sites
James B    436
James B

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

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
vergilst    1
vergilst

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

Share this post


Link to post
Share on other sites
batman    389
batman

Please try with

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

This work fine in Opera and Firefox


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
James B    436
James B

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

  • Like 1

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
vergilst    1
vergilst

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

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

Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
vergilst    1
vergilst

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

Thanks you Verglist, I take note...

"text-decoration: none;"

wpml_mail.gif


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×