How to position text over border?

Question

I was able to get it working with a white background:

enter image description here

But in cases where the background isn't white, the solution doesn't work as well:

enter image description here

It should be quite obvious what I did any why it doesn't work (negative margin + background set to background color). Are there any solutions to make it always look good?

Yea sure, screenshots are better than the actual CSS code `:P` — Šime Vidas, Jun 21 '12 at 16:39
I'm asking about idea - not code (already coded idea would be useful, too). — Atadj, Jun 21 '12 at 16:41
see http://stackoverflow.com/questions/5985009/how-can-i-make-a-fieldset-legend-style-background-line-on-heading-text — Rusty Fausak, Jun 21 '12 at 16:42
@AndrewHagner Yes, but it will not cover border (and won't leave that 10px gap to the left and to the right). — Atadj, Jun 21 '12 at 16:42
@rfausak I think this is what I'm looking for :) Thank you! I'm yet to test and see if it works. — Atadj, Jun 21 '12 at 16:45
http://www.impressivewebs.com/centered-heading-horizontal-line/ — js-coder, Jun 21 '12 at 17:11

score 1 · Accepted Answer · answered Jun 21 '12 at 17:07

One way would be to use spacer spans along with a wrapper (in this case header), with all elements with display set so they appear as table-cells (example).

HTML

<header>
    <span class="spacer"></span><!-- Place this wherever you want the border -->
    <h1>Title</h1>
    <!-- Spacing is automatically added next to elements (but not on ends) -->
    <span class="spacer"></span>
    <a href="http://www.example.com/">View Blog</a>
</header>

CSS

header {
    display:table-row;
    line-height:1.5em;
    font-size:2em;
    white-space:nowrap; /* Prevent titles from wrapping when more than one word is used */
}
header h1 {
    font-size:inherit; /* Change font-size in header */
    overflow:hidden;
    display:table-cell;
    vertical-align:middle;
}
header span.spacer { /* Makes spacers stretch */
    display:table-cell;
    width:50%;
}
header span.spacer { /* Adds spacing on both sides of spacers */
    padding:0 10px;
}
header span.spacer:first-child { /* Adds spacing only on right side of first spacer */
    padding:0 10px 0 0;
}
header span.spacer:last-child { /* Adds spacing only on left side of last spacer */
    padding:0 0 0 10px;
}
header span.spacer:after { /* Adds border to spacer */
    display:inline-block;
    width:100%;
    content:".";
    font-size:0;
    color:transparent;
    height:2px;
    background:#000;
    vertical-align:middle;
    position:relative;
    top:-1px;
}
header > a { /* Styles links according to example */
    font-size:.4em;
    vertical-align:middle;
    background:#25a2a4;
    color:#fff;
    text-transform:uppercase;
    font-family:monospace;
    border-radius:.5em;
    padding:.3em .5em;
    text-decoration:none;
}

Thank you :) I'll test that in a second and let you know if it works. — Atadj, Jun 21 '12 at 17:12
Worked like a charm. And it's even better solution than the one from link in comments :) The other one required images. Thank you so much! — Atadj, Jun 21 '12 at 17:16
@Flow, you're welcome. Be sure to test it in whichever browsers you need to support. It works in the latest versions of Firefox and Chrome, but I don't have access to anything else at the moment. It should work in all modern browsers, excluding IE7. — 0b10011, Jun 21 '12 at 17:18

score 0 · Answer 2 · answered Jun 21 '12 at 17:09

0

Are you putting the text and the button in a div whose background is set to white? It is hard to tell what you are doing without showing the CSS.

If you are using a div with background, why not just remove it? Or if there is some constraint why not set the background to rgba(#,#,#,0.0)?

background:rgba(255,255,255,0.0);

The alpha property helps set the level of opacity.

answered Jun 21 '12 at 17:09

Arjun Abhynav

543
4
15

If the `background` is removed, the border will show through. – 0b10011 Jun 21 '12 at 17:11
I'm looking for any container structure. Just need an idea. I'm looking for a way to create something like: ----- TEXT ----- so I can't possibly set opacity to 0 because the line will go through the text. – Atadj Jun 21 '12 at 17:11

score 0 · Answer 3 · answered Sep 28 '20 at 21:03

You can use a <fieldset> tag to accomplish this.

Example: https://jsbin.com/tovuwimezu/edit?html,css,output

HTML

<form>
    <fieldset>
        <legend class="blogLegend">New Blog Post</legend>

        blog details here
    </fieldset>
</form>

CSS

.blogLegend {
    font-weight: 600;
    color: rgb(63, 169, 196);
    padding: 10px;
    text-align: center;
}

How to position text over border?

3 Answers3

HTML

CSS

Linked