How to place text above the border?

Question

I managed to get it to work on a white background:

But in cases where the background is not white, the solution also does not work:

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

Answer 1

One way would be to use spacer spaces along with a wrapper (in this case, header ), all elements with display set to display as table-cell ( 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; } 

Answer 2

Do you put text and a button in a div whose background is set to white? It's hard to say what you do without showing CSS.

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

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

The alpha property helps set the opacity level.