How to do this text effect with CSS?

programming web dev
1

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.

2

You mean like this —Hello—

You can use unicode characters

3

perhaps span it and use left and right borders.

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:

<!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

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 :stuck_out_tongue:

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

Possibly cheating and doesn’t work in IE, but never mind small details :stuck_out_tongue:


span#foo:before {
	content: "&#8212;&#8212;&#8212;&#8212;";
}
span#foo:after {
	content: "&#8212;&#8212;&#8212;&#8212;";
}