CODEWITHSUNDEEP
htmlcss
Shpigford
Shpigford

Reputation: 25368

Create borders relative to text?

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.

Upvotes: 0

Views: 772

Answers (4)

rglepper
rglepper

Reputation: 86

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;
}

​

Upvotes: 1

Abhishek Saha
Abhishek Saha

Reputation: 2564

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

Upvotes: 0

Skpd
Skpd

Reputation: 670

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

Upvotes: 0

pibcat
pibcat

Reputation: 94

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

Upvotes: 1

Related Questions