I receive a lot of HTML output like this:
<div>
<h4>This</h4><p>Value 9.6 m.</p>
<h4>That</h4><p>Value 9.6 m.</p>
<h4>The other</h4><p>Another 7.69 m.</p>
<h4>And yet</h4><p>Another value 4.8 m.</p>
</div>
My goal is to render it in the following format:
This: Value 9.6 m.
That: Value 9.6 m.
The other: Another 7.69 m.
And yet: Another value 4.8 m.
I believe it should have been coded as a definition list, but unfortunately I do not have control over the generation of this HTML code.
While I am able to make the first h4 p 'block' render correctly with the provided solution, I am struggling to apply the same styling to subsequent 'blocks'.
h4:after {
content: ": ";
display: inline;
white-space: nowrap;
}
h4 {
display: block; }
h4~p {
display: block; }
h4:first-child {
display: inline;}
h4+p {
display: inline;
}
If you have any suggestions on how to achieve the desired output, they would be greatly appreciated. Thank you in advance!