html - 是否可以使用 CSS(不使用图像)执行此 "half strikethrough"

Question

我正在做一个不使用任何图像的网站，以使其响应迅速且速度更快，仅使用 CSS(3)。 我正在尝试使用 CSS 实现以下效果

我以前用过

<div class="strikethrough">
  <span>Ou</span>
</div>

和 CSS(使用图像):

.strikethrough {
  background: url('strip.gif') repeat-x 50% 50%;
}

.strikethrough span {
  background: #EAEBEC;
  padding: 0 5px;
  display: inline-block;
  margin: 0 auto;
}

是否可以只使用 CSS 来做同样的事情？

Answer 1

<div style="height: 1px; text-align: center; background-color: black;">
  <span style="position: relative; top: -0.5em; background-color: white;">
    Ou
  </span>
</div>

或

<fieldset style="text-align: center; border: 0; border-top: 1px solid black;">
  <legend>
    Ou
  </legend>
</fieldset>