是否有可能使用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>