How to vertically center a horizontal line to the first line of a multiline paragraph using CSS?

<p class="text">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</p>
<p class="text">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</p>

body {
  font-family: Arial, sans-serif;
  margin: 20px;
}
.text {
  //padding-left: 70px;
}
.text:first-of-type {
  background:
    linear-gradient(red 0 0) no-repeat
    0 calc(.5lh - 1px)/50px 2px;
}
p {
  margin: 0 0 20px;
  font-size: 20px;
}