Create borders relative to text?

Question

Here's an image showing what I'm trying to pull off.

enter image description here

So, a line to the left and right of any given text (typically would be some sort of of heading tag), that extends a certain distance on each side of the text (in this case, 65px).

I need something that is fluid in relation to the text itself...the overall width can't be fixed.

Take a look at this question: http://stackoverflow.com/questions/2812770/add-centered-text-to-the-middle-of-a-hr-like-line — SamHuckaby, Oct 29 '12 at 19:45
@SamHuckaby As far as I can tell, all of those are based on fixed-width. I need a solution that is fluid based on the text itself. — Shpigford, Oct 29 '12 at 19:46

score 1 · Answer 1 · edited May 23 '17 at 12:03

1

You can do it in different ways. One way would be setting border around the text, after keeping text inside header tags or div with font settings. Refer the suggestions in the following link:

Add centered text to the middle of a <hr/>-like line

edited May 23 '17 at 12:03

Community

1
1

answered Oct 29 '12 at 20:00

pibcat

94
2
8

As far as I can tell, all of those are based on fixed-width. I need a solution that is fluid based on the text itself. – Shpigford Oct 29 '12 at 20:34
another way..create div with width 100%. inside that create 3 divs and set the middle one width to Auto and set the left and right divs width accordingly(whethre fixed or variable width)..you will achieve what you looking for – pibcat Oct 29 '12 at 20:43

rglepper · Accepted Answer · 2012-10-31T05:34:14.890

This solution is the one that's worked best for me in the past, you can se the example here. The code uses ::before and ::after pseudo classes to create the lines and then applies display:table to the text so the box adapts to it's content (I've used h2 for the example) This type of design is normally centered so I've added the margin: 1em auto;
Doing it this way, you don't need to add any extra html. Hope it helps.

h2{
    display:table; 
    margin: 1em auto;
}
h2:before, h2:after{
    content:"";
    display: block;
    border-top: 1px solid #ccc;
    width: 65px;
    margin-top:.5em;
}
h2:before{
    float: left;
    margin-right:3px;
}
h2:after{
    float:right;
    margin-left:3px;
}

Abhishek Saha · Answer 3 · 2012-10-29T20:13:13.757

0

Your html code

<fieldset class="title">
    <legend>Some text</legend>
</fieldset>

your css code

fieldset.title {
    border-top: 1px solid #aaa;
    border-bottom: none;
    border-left: none;
    border-right: none;
    display: block;
    text-align: center;

}
    fieldset {
       width: 50%;                
    }
fieldset.title legend {
    padding: 5px 10px;

}

jsFiddle

edited Oct 29 '12 at 20:13

answered Oct 29 '12 at 19:48

Abhishek Saha

2,500
1
16
27

The example content does not appear to be form elements. Therefore this would be non-semantic markup. – Kevin Boucher Oct 29 '12 at 19:52
As mentioned in the post, it can't be fixed-width. Also mentioned in the post is that these would most likely be heading tags (ie. `h1`, `h2`, etc). So, this won't work. – Shpigford Oct 29 '12 at 19:53
added a css for fieldset. This takes care of non fixed-width – Abhishek Saha Oct 29 '12 at 19:59

score 0 · Answer 4 · answered Oct 29 '12 at 20:03

Try this: Demo

<html>
    <head>
        <style type="text/css"> 
            .striked-text {
                position: relative;
            }            
            .striked-text .text {            
                z-index: 10;
                position: relative;
                background-color: white;
                padding: 0 5px;
            }
            .striked-text .line {                
                left: -65px;
                padding: 0 65px;
                border-top: 1px solid gray;
                top: 0.7em;
                display: block;
                position: absolute;
                width: 100%;
                z-index: 1;
            }
        </style>
    </head>
    <body>
        <div style="text-align:center;">
            <span class="striked-text"><span class="text">FAQ</span><span class="line"></span></span>
        </div>
    </body>
</html>

For headings you need to define container's width

Create borders relative to text?

4 Answers4