Format text differently after line break <br>-CodePudding

I would like to format a text differently within a "p" tag with a class. There is a line break by "br" and the following text should be formatted differently. Is there a solution for this from css?
Below is the code example.

To-Do: Format ${getDate(loadStoredTasks())}" different to ${zaehlerRechner(loadStoredTasks())}

<div >
   <img src="img/energy-consumption_light.png"/>
   <p >${zaehlerRechner(loadStoredTasks())} <br> 
   ${getDate(loadStoredTasks())}</p>
</div>

800,10 kWh: is correct

17.11.2022 - 20.11.2022: should have other format (should look like: 17.11.2022 - 20.11.2022)

CodePudding user response：

You may wrap the second line in its own element set all the style you need to that element, e.g.

.list-task-notes {
   font: 2rem/1 system-ui;
}

.list-task-notes small {
   font-size: 50%;
}

<p >
  800,10 kWh<br> 
  <small>17.11.2022 – 20.11.2022</small>
</p>

Or you could use the ::first-line pseudoselector to change the formatting of the first line (here's a list of the allowed style for this psuedoselector)

.list-task-notes {
   font: 1rem/1.5 system-ui;
}

.list-task-notes::first-line {
   font-size: 200%;
}

<p >
      800,10 kWh<br> 
      17.11.2022 – 20.11.2022
    </p>

CodePudding user response：

like this? but ::first-line is only effective for first line, like it named

.list-task-notes{
    font-weight: normal;
}
.list-task-notes::first-line {
    font-weight: bold;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/::first-line

CodePudding user response：

You can try div p::first-line{ /*Some styling here*/ }