Get line-through around text with fluid width

Question

I've stuck on a problem for a while now. I have a h1 element around which i need à line. Like this : ----- Text -----

The page's background is an image, so i can't just use a background-color on my h1 element to hide my text.

I managed to get the result with a three colums table, but i need to set a width for the center cell for it to work.

Is it possibile to get it to work with a dynamic width ?

Thanks in advance.

Post the code you currently have working. – James Montagne Apr 13 '12 at 14:00 — James Montagne, Apr 13 '12 at 14:00

score 0 · Answer 1 · answered Apr 13 '12 at 14:26

I would look in to using the css pseudo elements :before and :after to add the line either side of the text.

something like this might work but you will have to play around:

.textWithLine:before {
    display:block;
    content: "";
    float:left;
    width: 300px;
    height: 1px;
    background: #000;
    margin:5px;
}
.textWithLine:after {
    display:block;
    content: "";
    float:right;
    width: 300px;
    height: 1px;
    background: #000;
    margin: 5px;
}

If you were to use that in a container with an overflow set to hidden, and text-align center that would sort of work dynamically but you will have to have a play to get it perfect.

score 0 · Answer 2 · answered Apr 16 '12 at 14:28

Thanks for your answer. Seemed like a good idea but i can't figure out how to get the two added blocks to exceed out of the parent block. The result here is the :after block to be pushed under the title.

Here's my code :

<div class="titre_bloc2">

     <h1>Title</h1>

</div>


.titre_bloc2 
{
position:absolute;
height:30px;
text-align:center;
width:100%;
overflow:hidden;
}   
.titre_bloc2 h1
{
border:1px solid white;
text-align:center;
display:inline-block;
}
.titre_bloc2 h1:before
{
width:300px;
height:20px;
border:1px solid blue;
float:left;
display:block;
content: "test";
}
.titre_bloc2 h1:after
{
width:300px;
height:20px;
border:1px solid blue;
float:right;
display:block;
content: "test";
}

score 0 · Accepted Answer · answered Apr 30 '12 at 10:25

Finally did it with javascript, i usually don't like using it when i can avoid it but i couldn't figure another way and my code is cleaner. Just used a normal hn with a class which is detected by jQuery. Then : - The title is put to display:inline-block, this way the block is only as wide as it's content and i can't use the width later. - The title is put back to block with align:center - The title is wrapped by a new div - I create two new div which are placed around the title after calculating what whidth it should use

score 0 · Answer 4 · edited May 23 '17 at 10:32

I had the same question, but most of the answers I found did not fit what I needed, until I found CSS technique for a horizontal line with words in the middle.

This solution does not use any JS, and works in just about any situation. Hope it helps.

***** Edit ***** Here is the code I used for my project. In case you are interested, you can see the final result at jtslegal.com. I used it for the titles of all sidebar widgets.

<div id="widget_title">Request a Call</div>

#widget_title { overflow: hidden; padding: 10px 26px 0; }
#widget_title:after, #widget_title:before {
    content: '';
    display: inline-block;
    height: 1px;
    width: 100%;
    margin: 0;
    background: #999;
    text-indent: 20px;
    position: relative;
    vertical-align: middle;
}
#widget_title:after {
    left: .5em;
    margin-right: -100%;
}
#widget_title:before {
    right: .5em;
    margin-left: -100%;
}

Sure, Sorry it took me so long to answer. I will add it to my original post. — Berto, Feb 08 '14 at 21:42

Get line-through around text with fluid width

4 Answers4