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 class="list-task-responsible">
<img src="img/energy-consumption_light.png"/>
<p class="list-task-notes">${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)
>Solution :
You may wrap the second line in its own element, e.g.
.list-task-notes {
font: 2rem/1 system-ui;
}
.list-task-notes small {
font-size: 50%;
}
<p class="list-task-notes">
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.
.list-task-notes {
font: 1rem/1.5 system-ui;
}
.list-task-notes::first-line {
font-size: 200%;
}
<p class="list-task-notes">
800,10 kWh<br>
17.11.2022 – 20.11.2022
</p>
