( support Mozila / chrome / safari ).not support IE / Opera?

mozila / chrome / safari

IE / Opera

<!DOCTYPE html>
<html>
<head>
<title> my page</title>
<style>

hr.style-eight
{
padding: 0;
border: none;
border-top:1px dashed black;
color: #333;
text-align: center;
width:50%;

}
hr.style-eight:after
{
content: “Moon”;
display: inline-block;
position: relative;
top: -0.7em;
font-size: 1.5em;
padding: 0 0.25em;
background: white;
}

</style>
</head>
<body>
<br><br>
<hr class=“style-eight”>

</body>
</html>

Hi,

IE9+ can easily be fixed by adding overflow:visible and margin:auto to the hr but opera doesn’t seem to want to play ball.

You can do it like this for opera (and others) with a little more css though:


<!DOCTYPE html>
<html>
<head>
<title>my page</title>
<style>
hr.style-eight {
	padding: 0;
	border: none;
	text-align: center;
	width:50%;
	margin:auto;
	overflow:visible;
	line-height:1.5em;
	height:1.5em;
	position:relative;
}
hr.style-eight:before {
	content:" ";
	border-bottom:1px dashed black;
	position:absolute;
	left:0;
	right:0;
	top:50%;
	z-index:2;
}
hr.style-eight:after {
	content: "Moon";
	display:inline-block;
	position:relative;
	text-align:center;
	font-size: 1.5em;
	padding: 0 0.25em;
	background: white;
	color: #333;
	z-index:3;
}
</style>
</head>
<body>
<br>
<br>
<hr class="style-eight">
</body>
</html>

Won’t work in ie8 and under though.

Thanks buddy

Maybe it doesn’t fit into your system, but as an alternative you can forget the hr, and style a text-element:

...
<h2><span>Moon</span><b></b></h2>
...

The <b> tag (a span with a separate class is semantically better, but needs more code :wink: ) is used to place the dashed background line.
The <span> is used to overlay the dashed line, with some padding left and right.

h2 {
	text-align: center;
	position: relative;
	}
h2 span {
	padding: 0 10px;
	background: white;
	position: relative;
	z-index: 2;
	}
h2 b {
	border-bottom: 1px dashed black;
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	z-index: 1;
	line-height: 1px; /* for IE7 */
	}