Magearlik Magearlik - 3 months ago 9
CSS Question

How do I get this CSS to work in safari

I am currently testing some CSS in different web browsers. This all works great except in Safari 5.1.7. I am testing this fiddle . Does anyone know how I can fix this, because I would like to use it in a website.

The css is supposed to display a heading with a colored line either side.

Here is the code:

[HTML]

<h1>This is my Title</h1>
<h1>Another Similar Title</h1>
<div class="color"><h1>Just Title</h1></div>


[CSS]

h1 {
position: relative;
font-size: 30px;
z-index: 1;
overflow: hidden;
text-align: center;
}
h1:before, h1:after {
position: absolute;
top: 51%;
overflow: hidden;
width: 50%;
height: 1px;
content: '\a0';
background-color: red;
}
h1:before {
margin-left: -50%;
text-align: right;
}
.color {
background-color: #ccc;
}

Answer

Better use one element inside h1 and use :before and :after with left and right properties. This will work in most of the browsers including Safari.

h1 {
  overflow: hidden;
  font-size: 30px;
  text-align: center;
}
h1 span {
  display: inline-block;
  vertical-align: top;
  position: relative;
  padding: 0 5px;
}
h1 span:before, h1 span:after {
  background-color: red;
  position: absolute;
  margin-top: -1px;
  width: 9999px;
  top: 50%;
  height: 1px;
  content: '\a0';
  left: 100%;
}
h1 span:before {
  left: auto;
  right: 100%;
}
.color {
  background-color: #ccc;
}
<h1><span>This is my Title</span></h1>
<h1><span>Another Similar Title</span></h1>
<div class="color">
  <h1><span>Just Title</span></h1>
</div>

Comments