css - 我如何在CSS中使用此CSS

我目前正在不同的Web浏览器中测试一些CSS。除了Safari 5.1.7，这一切都很好。我正在测试fiddle。有谁知道我可以解决这个问题，因为我想在网站上使用它。

CSS应该在两侧显示带彩色线的标题。

这是代码：

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

最佳答案

最好在h1中使用一个元素，并将:before和:after与left和right属性一起使用。这将适用于包括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>

关于css - 我如何在CSS中使用此CSS，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38993261/