如何让这个CSS在safari中工作

我目前正在不同的web浏览器中测试一些CSS。除了Safari 5.1.7之外，这一切都非常有效。我正在测试这个。有谁知道我如何解决这个问题，因为我想在网站上使用它

css应该显示一个标题，两边各有一条彩色线

代码如下：

[HTML]

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

---

最好在

h1

中使用一个元素，并将

:before

和

:after

与

left

和

right

属性一起使用。这将适用于大多数浏览器，包括Safari

h1{
溢出：隐藏；
字体大小：30px；
文本对齐：居中；
}
h1跨度{
显示：内联块；
垂直对齐：顶部；
位置：相对位置；
填充：0 5px；
}
h1跨度：之前，h1跨度：之后{
背景色：红色；
位置：绝对位置；
页边顶部：-1px；
宽度：9999px；
最高：50%；
高度：1px；
内容：'\a0'；
左：100%；
}
h1跨度：之前{
左：自动；
右：100%；
}
.颜色{
背景色：#ccc；
}

这是我的标题
另一个类似的标题
只是标题

css的哪一部分不起作用？我不知道。它只是没有在标题的左侧显示红线。但它在我测试过的每一款浏览器中都能正常工作，比如Opera、Chrome、IE和Firefox。我个人并不担心Safari for windows。这是一个死气沉沉的浏览器，因为它已经多年没有更新了。用户百分比必须低于1%Safari 5.1.7已使用6年，使用率几乎为零（）-考虑到将看到它的用户数量，适当的回退是否足够？它在现代Safari中工作得很好。Safari 5.1.7不支持

：before

：before

伪类你能解释一下它们之间的区别吗？？？@Gauravagarwal我添加了一些解释，这肯定会解决问题，但我不打算解释

：after

和

：before

在每种情况下的不同行为浏览器

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;
}