How to vertically center a horizontal line to the first line of a multiline paragraph using CSS?
I have a layout where I need to position a horizontal line next to a multiline paragraph. The line should be vertically centered to the first line of the paragraph, not to the entire paragraph.
How can I adjust the CSS to achieve this alignment?
Here is the HTML and CSS code I have so far: https://jsfiddle.net/pmcdq1hr/1/
How can I adjust the CSS to achieve this alignment?
Here is the HTML and CSS code I have so far: https://jsfiddle.net/pmcdq1hr/1/
<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;
}Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
