Question

我正在尝试创建一个两边都有线条的标题。由于某种原因，它只在左侧的IE上不起作用。

h2 {
  position: relative;
  overflow: hidden;
  text-align: center;
}
h2:before,
h2:after {
  position: absolute;
  top: 44%;
  overflow: hidden;
  width: 50%;
  height: 1px;
  margin-left: 5%;
  content: '\a0';
  background-color: red;
}
h2:before {
  margin-left: -55%;
  text-align: right;
}

<h2>THE HEADING</h2>

Answer 1

适用于Chrome / FF / IE

的解决方案

这是一种替代解决方法，适用于宽度不同的内容/文本。

Example Here

它在IE中不起作用的原因是因为伪元素没有相对于文本定位。为了解决这个问题，我从伪元素中删除了绝对定位，并将display设置为table-cell，使它们相对于文本定位。

调整right / left定位以控制文字周围的空间。

.line {
  display: table;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
}
.line:before,
.line:after {
  content: '';
  display: table-cell;
  position: relative;
  top: 0.5em;
  width: 45%;
  height: 1px;
  border-top: 1px solid #f00;
}
.line:before {
  right: 5%;
}
.line:after {
  left: 5%;
}

<h2 class="line">THE HEADING</h2>

<h2 class="line">THE LONGER HEADING</h2>

CSS片段不在IE上工作：在/之后

1 个答案:

适用于Chrome / FF / IE