The forums have permanently moved to forum.kirupa.com. This forum will be kept around in read-only mode for archival purposes. To learn how to continue using your existing account on the new forums, check out this thread.

Results 1 to 7 of 7

Thread: How to do this text effect with CSS?

  1. #1

    How to do this text effect with CSS?

    Hi all,

    How is it possible to achieve this effect with CSS?

    Say a text element (span element, containing "Hello") in a container, how do I get a line through it, but not actually over the text itself?

    Thanks in advance.
    Attached Images Attached Images  
    If you notice this notice you will notice that this notice is not worth noticing.

    "Are you doing anything tonight? If not, how about me?"

    Opera Sucks! - FIX IT
    Oliver Zheng

  2. #2
    You mean like this —Hello—

    You can use unicode characters

    shane-c....Your site is a lot like a transvestite in that respect.
    fester8542.I'd hit it like the fist of an angry God .
    JoshuaJonah.I design for DDD. Then clients usually like it, and the ladies find me more attractive.
    Cybercode Albert Einstein Said that my math teacher has that on his wall

    K-Emmys-06: Best "Best Mod" K-Emmys-06: Best "Most Creative Critic"

    Member #1 of the "I wont critique Timmytot's designs anymore" club

  3. #3
    perhaps span it and use left and right borders.

  4. #4
    Other possibility would be to make a background image of a line. Set the test in a span tag and then add padding and a background color the same as the background to get hte desired effect. You may need another span tag inside the 1st span tag in order to not have it look like a text strike-through.

    Simple example:

    HTML 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" lang="en" xml:lang="en">
     <head>
      <title> </title>
    
      <style type="text/css" media="all">
      body{ font-family: Verdana, Arial, sans-serif; }
      p span{ padding: 0 20px; background: #fff url(bg.gif) left center repeat-x; }
      p span span{ background: #fff; padding: 0 5px; }
      </style>
    
     </head>
     <body>
      <p>
       Lorem <span><span>ipsum</span></span> usu id molestiae pertinacia definitionem, sea esse choro euripidis ex.
      </p>
     </body>
    </html>
    Example at: http://home.wi.rr.com/gronitz/temp/mtsoul/index.html (source code shown above)
    Background Image at: http://home.wi.rr.com/gronitz/temp/mtsoul/bg.gif
    Γνώθι Σεαυτόν

  5. #5
    Hey thanks for the code Ankou! I thought about backgrounds, but it seems like a lot of work just for a "border" in the middle.

    Maybe an element positioned absolute before the text, and set to height 50%, and border-bottom? Seems like a waste of element as well.

    DDD, I don't want to use characters
    If you notice this notice you will notice that this notice is not worth noticing.

    "Are you doing anything tonight? If not, how about me?"

    Opera Sucks! - FIX IT
    Oliver Zheng

  6. #6
    Hmm... maybe set the height of the object to 1px, overflow to visible and have the left and right borders be as long as you need them.

  7. #7
    4,029
    posts
    home cooking is killing the restaurant industry
    Possibly cheating and doesn't work in IE, but never mind small details

    Code:
    span#foo:before {
    	content: "————";
    }
    span#foo:after {
    	content: "————";
    }
    There are only 10 kinds of people in this world:
    Those that might know ternary, those that do, and those that don't
    Say NO to DRM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012