Geek Answers Handbook

How can I draw a line through a div, above the text, without crowding out the text?

I have a series of square divs with text in them, and I need to draw a line through those divs above the text. Z-Index is not an option. Also there is no <strike> , because it should apply to the entire div, and not just the text.

I need it to spread throughout the div, but be included at the top of the text, as on another layer, and I'm trying to determine if this is possible without a Z-index.

+6
source share
5 answers

With :after - DEMO

 div { position: relative; } div:after { position: absolute; left: 0; top: 50%; height: 1px; background: #c00; content: ""; width: 100%; display: block; }
+18
source

Script Link

 .wrapper { position:relative; width:110px; } .square { width:20px; height:20px; border:2px solid #000; display:inline-block; text-align:center; } .strike { position:absolute; width:100%; height:2px; background:black; top:11px; left:0px; }
+2
source

If you can’t use text layout: in turn, you probably have padding or margins on your div, so the line does not go all the way. This snippet draws a line with a width div and through the text, preserving your margins or margins.

 <div style="border:solid 2px black; padding : 100px"> <div class="strike-through" style="border-bottom : solid 1px red; margin-bottom : -12px;"></div> <div style="text-align : center; padding-left:50px; padding-right:50px; border : solid 1px green;">Lorem Ipsum Voluptatem</div> </div>
+1
source

What about the background image as a solution? I mean someCSS code, for example:

 .DIV.squarestroke { background: url(img_with-line.gif) repeat; }
0
source

A good old hr mod can do this:

  <hr style="position:absolute; width:50px; top:5px; left:5px;" />
-1
source

More articles:


All Articles