Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Apr 2004
    Location
    Canada
    Posts
    302
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question how to set colour of text-decoration

    I've googled and searched in this forum as best I could....

    Is there a way to set the colour of the text-decoration? I'm thinking specifically of line-through so that the strike out line is red but the underneath text is black. I tried the following, but of course it didn't work:

    Code:
    .strike {background:#fff;color:#000;text-decoration:line-through #f00;}
    w3schools merely says that "The color of the decoration should be set by the "color" property."

    (I can't believe that I'm the only person who has thought of doing this!)

  • #2
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You won't be able to do it with text decoration, placing a border below it should give you what you want.

    .strike {
    background: #FFF;
    color: #000;
    border-bottom: 1px solid #F00;
    }


    Edit, sorry misread slightly, that won't give you what you're after.

    How about creating a background image of a red line, then setting it as the background of .strike?

  • #3
    Regular Coder
    Join Date
    Jan 2006
    Posts
    164
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <strike> tags are deprecated, you should be using <del> instead

    However I do not think it is possible to change the colour of the strike through.
    Visit me ¦CSS Magic¦

  • #4
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    He didn't say he's using strike tags...

  • #5
    New Coder
    Join Date
    Jul 2002
    Location
    UK
    Posts
    92
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, well here's one way I can think of doing it, but it's not very nice

    Code:
    del { color:#f00; }
    del span { color: #000; }
    And then e.g,
    Code:
    <p>This is pretty <del><span>nice</span></del>, dirty.</p>
    Hopefuly you can see what it's doing.
    Last edited by MetalStorm; 01-29-2006 at 05:07 PM.

  • #6
    Regular Coder
    Join Date
    Apr 2004
    Location
    Canada
    Posts
    302
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by MetalStorm
    Code:
    del { color:#f00; }
    del span { color: #000; }
    And then e.g,
    Code:
    <p>This is pretty <del><span>nice</span></del>, dirty.</p>
    Yes, indeed, that works. Thank you, MetalStorm, for coming up with that creative solution.

    (also thanks to mark87 for leaping to my defense in re the use of strike tags. I did know that the fanatics at w3c had suddenly decided at some point in the past to ditch 'strike' and 's' in favour of 'del'. I can't wait for them to decree in two or three years that it will always be 'x'. You gotta love planned obsolescence. )

  • #7
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts

    kinda works...

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    
    .strike {
    	color: #FF9933;
    	border-bottom: solid 1px #333;
    	line-height: 3px;
    }
    
    </style>
    </head>
    
    <body>
    <p class="strike">some stricken text</p>
    </body>
    </html>
    Gary edit: oops didn't see metalstorm's solution, better than mine
    Last edited by Graft-Creative; 01-29-2006 at 10:43 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •