Text with a white line in the middle CSS

Question

I have a task to make nice text with a white line in the middle of text, like in this picture below. Is it possible to make it with css? Here is Fiddle

.container{
  height:200px;
  width:400px;
  background-color:#EB8A1C;
}

.container h1{
  color:#2CDB1D;
  text-align: center;
  padding-top:40px;
  font-size:400%;
}

<div class="container">
  <h1> filosofia </h1>
</div>

Answer 1

You could do this with SVG and Linear Gradient. Here's another Demo

svg {
  border: 1px solid black;
  background: #EB8A1C;
}

text {
  font-size: 30px;
  font-weight: bold;
}

<svg width="250px" height="50px">
  <defs>
    <linearGradient id="textGradient" x1="0" x2="0" y1="0" y2="1">
      <stop offset="0%" stop-color="#A5DE4A" />
      <stop offset="45%" stop-color="#A5DE4A" />
      <stop offset="50%" stop-color="white" />
      <stop offset="60%" stop-color="#A5DE4A" />
      <stop offset="100%" stop-color="#A5DE4A" />
    </linearGradient>
  </defs>

  <text fill="url(#textGradient)" x="0" y="35">LOREM IPSUM</text>
</svg>

There is another way to do this with overlapping elements that are that have position: absolute and fixed height and most important part is overflow: hidden on span's

@import url(https://fonts.googleapis.com/css?family=Montserrat:700);

.text {
  width: 200px;
  height: 50px;
  padding: 10px;
  background: #EB8A1C;
  color: white;
  position: relative;
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}

span {
  font-size: 45px;
  left: 20px;
  position: absolute;
  overflow: hidden;
}

span:nth-child(1) {
  color: #A5DE4A;
  height: 50;
}

span:nth-child(2) {
  color: white;
  height: 33px;
}

span:nth-child(3) {
  color: #A5DE4A;
  height: 29px;
}

<div class="text">
  <span>filosofia</span>
  <span>filosofia</span>
  <span>filosofia</span>
</div>