Is it possible to do this "half strikethrough" using CSS (without using images)

Question

I'm doing a site without using any images, to make it responsive and faster, only CSS(3). I'm trying to do the following effect using CSS

I used to do this using

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

and the CSS (using image):

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

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

Is it possible to do the same using only 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>

or

<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

It looks like I'm too late, but here it is anyway. -jsFiddle

Edit- Added code for different style and updated 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>