# How to do this text effect with CSS?

**URL:** <https://forum.kirupa.com/t/how-to-do-this-text-effect-with-css/183131>\
**Category:** web dev\
**Created:** [March 24, 2006, 2:20am UTC](https://forum.kirupa.com/t/how-to-do-this-text-effect-with-css/183131 "2006-03-24T02:20:42Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![MTsoul](https://avatars.discourse-cdn.com/v4/letter/m/91b2a8/32.png) [@MTsoul](https://forum.kirupa.com/u/MTsoul)\
**Post date:** [March 24, 2006, 2:20am UTC](https://forum.kirupa.com/t/how-to-do-this-text-effect-with-css/183131/1 "2006-03-24T02:20:42Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![DDD](https://avatars.discourse-cdn.com/v4/letter/d/9fc348/32.png) [@DDD](https://forum.kirupa.com/u/DDD)\
**Post date:** [March 24, 2006, 6:01am UTC](https://forum.kirupa.com/t/how-to-do-this-text-effect-with-css/183131/2 "2006-03-24T06:01:08Z")

</div>

You mean like this —Hello—

You can use unicode characters

---

<div class="post-metadata">

**Author:** ![bwh2](https://avatars.discourse-cdn.com/v4/letter/b/8c91f0/32.png) [@bwh2](https://forum.kirupa.com/u/bwh2)\
**Post date:** [March 24, 2006, 9:04am UTC](https://forum.kirupa.com/t/how-to-do-this-text-effect-with-css/183131/3 "2006-03-24T09:04:23Z")

</div>

perhaps span it and use left and right borders.

---

<div class="post-metadata">

**Author:** ![Ankou](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ankou/32/1351_2.png) [@Ankou](https://forum.kirupa.com/u/Ankou)\
**Post date:** [March 24, 2006, 9:24am UTC](https://forum.kirupa.com/t/how-to-do-this-text-effect-with-css/183131/4 "2006-03-24T09:24:51Z")

</div>

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:

```auto
<!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](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](http://home.wi.rr.com/gronitz/temp/mtsoul/bg.gif)

---

<div class="post-metadata">

**Author:** ![MTsoul](https://avatars.discourse-cdn.com/v4/letter/m/91b2a8/32.png) [@MTsoul](https://forum.kirupa.com/u/MTsoul)\
**Post date:** [March 24, 2006, 5:54pm UTC](https://forum.kirupa.com/t/how-to-do-this-text-effect-with-css/183131/5 "2006-03-24T17:54:13Z")

</div>

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 😛

---

<div class="post-metadata">

**Author:** ![abreev8](https://avatars.discourse-cdn.com/v4/letter/a/90ced4/32.png) [@abreev8](https://forum.kirupa.com/u/abreev8)\
**Post date:** [March 24, 2006, 7:01pm UTC](https://forum.kirupa.com/t/how-to-do-this-text-effect-with-css/183131/6 "2006-03-24T19:01:26Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![955](https://avatars.discourse-cdn.com/v4/letter/9/4bbf92/32.png) [@955](https://forum.kirupa.com/u/955)\
**Post date:** [March 24, 2006, 7:06pm UTC](https://forum.kirupa.com/t/how-to-do-this-text-effect-with-css/183131/7 "2006-03-24T19:06:53Z")

</div>

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

```auto

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

```