How to make second line bold using CSS

Question

I have a div which has some contents. I tried this CSS to make content in next line, but how can make second line bold ?

.description {
  white-space: pre-line !important;
}

<div class="description">
  Head of Department 
  Department: XYZ ABCD 
  [email protected]
</div>

Answer 1

You can not do that with pure CSS. But this task can be done by some Js works.

Remove this style:

.description {
    white-space: pre-line !important;
}

and next add this CSS style:

.singleLine{
    white-space: pre-line !important;
    display: block;
}

and then you can write this Js code :

var element =  document.getElementsByClassName("description")[0];
var text = element.innerHTML;
var multipleLinesText = text.split(/\r?\n/);
const theBoldLinesIndex = [1];
var spans = "";
multipleLinesText.map((value,index)=>{
    if(theBoldLinesIndex.some(i=>i==index)){
        spans += `<span class="singleLine"><b>${value}</b></span>`;
    }
    else{
        spans += `<span class="singleLine">${value}</span>`;
    }
})
        
element.innerHTML = spans;

Consider these two things:

First, make this Js part run after the Html elements have been rendered.

Second, in theBoldLinesIndex insert the lines index you want to be bold, which in your case, is second line (index = 1).