Creating a title overlaying a line (CSS) - html

Question

For my web app's landing page, I'm trying to create a title that appears overlaid on a dotted line (similar to this effect). This is what I currently have:
How do I create this such that the dotted line does not run through the title? I prefer to use the simplest CSS/HTML I possibly can and support the max number of browsers.
My code is pretty rudimentary. So far it is:
<h2>New Account:</h2><br>
<h2 style="margin-top:-0.5em;border:2px dashed #ffffff;border-radius:4px;color:white;display: inline-block;padding:10px 5px 5px 5px;">Choose Nickname:<br>Password:<br></h2>

Answer 1

With the example below you don't need to know the background color, is perfectly scalable, the dots extend to the remaining space of the title.
Actually, the title can wrap on multiple lines.
Feel free to tweak it to your needs and don't forget to prefix.
dotted-container {
border: 2px dotted red;
border-top-width: 0;
margin: 2rem 1rem;
display: block;
}
dotted-container>.content {
padding: 1rem;
}
dotted-title {
display: flex;
align-items: center;
height: 2px;
margin: 0 2px;
}
dotted-title > span {
padding: 0 1rem;
}
dotted-title:after,
dotted-title:before {
border-top: 2px dotted red;
content: '';
display: inline-block;
height: 0;
flex:1;
}
<dotted-container>
<dotted-title>
<span>title</span>
</dotted-title>
<div class="content">
Actual content
</div>
</dotted-container>
<dotted-container>
<dotted-title>
<span>some other title</span>
</dotted-title>
<div class="content">
Some other actual content
</div>
</dotted-container>
<dotted-container>
<dotted-title>
<span>and here's a title<br /> on two lines</span>
</dotted-title>
<div class="content">
Some content for a title on two lines.
</div>
</dotted-container>
Of course, you might want to adjust the margin/padding to your own liking and to accommodate any title wrapping on more than one line.
If you want to replace the "crappy" dotted line with a true dotted one, here's an example. Read the blog post to understand it.
Another good write-up on border-image property here.
Also note you don't have to use custom tags, as I did. It's an example. You may use classes or any other selectors that work for your specific case.
And here's an SCSS script I made you can use to pass in your selectors and desired margin/padding values. Far from perfect, but seems to do the trick:
$border-width: 2px;
$border-style: dotted;
$border-color: red;
$container: 'dotted-container';
$title: 'dotted-title';
$content:'.content';
$padding: 2rem;
$margin: 1rem;
$title-padding-value: 3;
$title-padding-unit:rem;
#{$container} {
border: $border-width $border-style $border-color;
border-top-width: 0;
margin: #{$title-padding-value/2}#{$title-padding-unit} $margin $margin $margin;
display: block;
> #{$content} {
padding: #{$title-padding-value/2}#{$title-padding-unit} $padding $padding $padding;
}
#{$title} {
display: flex;
align-items: center;
height: $border-width;
margin: 0 $border-width;
> span {
padding: 0 $padding;
}
&:after,
&:before {
border-top: $border-width $border-style $border-color;
content: '';
display: inline-block;
height: 0;
flex: 1;
}
}
}

Answer 2

Here's a solution with a combination of pseudo elements, flexbox, and absolute positioning.
* {
margin:0;padding:0;
box-sizing:border-box;
}
body {
background: url('https://s-media-cache-ak0.pinimg.com/originals/33/3b/4f/333b4f22ae39d1aaf8c23d77e759d8e1.jpg') 0 0 no-repeat / cover;
}
h2:before,h2:after {
content: '';
bottom: 50%;
border-top: 3px dotted black;
flex: 1 0 0;
}
h2:before {
margin-right: 1em;
}
h2:after {
margin-left: 1em;
}
h2 {
display: flex;
align-items: center;
font-size: 3em;
position: absolute;
top: 0; left: 0; right: 0;
transform: translateY(calc(-50% + 1px));
text-shadow: 0 3px 0 #fff;
}
section {
border: dotted black;
border-width: 0 3px 3px;
position: relative;
width: 80%;
margin: 3em auto;
padding-top: 3em;
background: rgba(255,255,255,0.5);
}
<section>
<h2>New Account:</h2>
<p>foo</p>
<p>foo</p>
<p>foo</p>
</section>

Answer 3

You can use a combination of z-index and background-color, as shown in the snippet below:
z-index pulls the New Account: title in front, then the background-color hides the border behind the it
body {
background: green;
}
#one {
position: absolute;
left: 35px;
z-index: 1;
background: green;
display: inline-block;
color: white;
}
#two {
position: absolute;
z-index: -1;
top: 55px;
margin-top: -0.5em;
border: 2px dashed white;
border-radius: 4px;
color: white;
display: inline-block;
padding: 10px 5px 5px 5px;
}
<h2 id="one">New Account:</h2><br>
<h2 id="two">Choose Nickname:<br>Password:<br></h2>

Answer 4

Perhaps you can do something like this:
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.box {
background: green;
padding: 15px;
width: 250px;
height: 250px;
}
.inner-box {
border: 1px dotted #ffffff;
height: 100%;
position: relative;
-webkit-border-radius: 7px;
border-radius: 7px;
}
.inner-box p {
position: absolute;
width:70%;
text-align: center;
top: -25px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
color: #ffffff;
display: block;
background: green; /* Make it the same as background color */
}
<div class="box">
<div class="inner-box">
<p>My Awesome Title</p>
</div>
</div>

Answer 5

I would suggest having a background colour on the "New Account" if the background is only one colour, that way the dotted line will not be seen as it is covered by the background colour.
The code snippet shows how this can be adjusted to show more or less of the dotted border either side of the title.
.parent{
background-color: green;
position: relative;
font-size: 14px;
}
.parent h2:first-child{
color: #fff;
text-align: center;
z-index: 1;
background-color: green;
position: absolute;
left: 20px;
padding: 0 5px;
}
.parent h2:last-child{
margin-top: 15px;
z-index: 0;
}
.parent_two h2:first-child{
left: 12px;
padding: 0 17px;
}
<div class='parent'>
<h2>New Account:</h2><br>
<h2 style="border:2px dashed #ffffff;border-radius:4px;color:white;display: inline-block;padding:10px 5px 5px 5px;">Choose Nickname:<br>Password:<br></h2>
</div>
<div class='parent_two parent'>
<h2>New Account:</h2><br>
<h2 style="border:2px dashed #ffffff;border-radius:4px;color:white;display: inline-block;padding:10px 5px 5px 5px;">Choose Nickname:<br>Password:<br></h2>
</div>

Answer 6

I would move the title up with absolute positioning (just make sure the parent is relative positioned), wrap the title text in a <span> and then add padding and matching background color to that <span>.
body {
margin: 0;
background-color: green;
}
.box {
position: relative;
margin: 1rem;
padding: 1rem;
color: white;
box-sizing: border-box;
border: 1px dashed white;
}
.box-title {
position: absolute;
top: -1rem;
left: 0;
margin: 0;
width: 100%;
text-align: center;
font-size: 1.5rem;
}
.box-title>span {
padding: 0 1rem;
background-color: green;
}
<div class="box">
<h2 class="box-title"><span>New Account:</span></h2>
<p>Username:</p>
<p>Password:</p>
</div>
FWIW, I don't typically care for extra markup but if I have to work extra hard to make it work some other way then I find it acceptable. Especially when it's super simple.

Answer 7

body{
background: url('https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=750&h=350') center top 0 no-repeat / cover;
}
.wrapper {
max-width: 400px;
margin: 30px auto 0;
border: 2px dotted red;
height: 200px;
border-top: 0;
text-align: center;
}
.heading {
display: table;
width: 100%;
position: relative;
}
.heading:before {
content: '';
display: table-cell;
border-top: 2px dotted red;
}
.heading:after {
content: '';
display: table-cell;
border-top: 2px dotted red;
}
.txt-wrapper {
display: table-cell;
width: 1%;
white-space: nowrap;
line-height: 0;
padding: 0 10px;
}
<div class="wrapper">
<div class="heading">
<h2 class="txt-wrapper">
This is heading
</h2>
</div>
<P>
This is paragraph.
</P>
<P>
This is another paragraph.
</P>
</div>