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>