html - 是否可以使用 CSS（不使用图像）来执行此“半删除线”

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>

Answer 2

div 
{
text-align: center;
}

span
{
display: inline-block;    
}

span:before,
span:after {
border-top: 3px solid #EAEBEC;
display: block;
height: 1px;
content: " ";
width: 48%;
position: absolute;
left: 0;
top: 1.2em;
}

span:after
{
right: 0;  
left: auto; 
}

<div>
    <span>OU</span>
</div>

Answer 3

看起来我来得太晚了，但无论如何都在这里。- jsFiddle

编辑- 添加different样式代码并更新 jsFiddle

css

.strikethrough{
  box-shadow: 
        0px -10px 0px 0px #EAEBEC inset, inset 0px -11px 0px 0px black;
  background: #EAEBEC;
  padding: 0 5px;
  display: block;
    text-align:center; 
}
.strikethrough span{
    background:#EAEBEC;
}

.different{
    background:white;
}
.different .strikethrough{
  box-shadow: 
        0px -10px 0px 0px #fff inset, inset 0px -11px 0px 0px black;
  background: #fff;
  padding: 0 5px;
  display: block;
    text-align:center; 
}
.different .strikethrough span{
    background:#fff;
}

html

<div class="strikethrough"> <span>&nbsp;Ou&nbsp;</span> </div>

<div class="different">
    <div class="strikethrough"> <span>&nbsp;Ou&nbsp;</span>

    </div>
</div>