Question 374849 in Html Question posted in
Some basic documentation can be found here.

Given an example html snippet that I cannot change, is there a **CSS only** approach to make text before <br> as bold and after <br> as normal?

I have this html

<div class="html-input goto-card-label">Header <br> Subtitle</div>

CSS is making the entire label bold:

.goto-card-label {
  font-weight: bold;
}

Is there a CSS only approach to make the text after the <br> tag as font-weight: normal; without changing the html at all?

Note: I likely cannot use the content css property since the text will not always be what I put in the example.

Tags:

2

Answers


  1. 0

    Try following ways
    you can use span tag with inline CSS Styling

    <div class="html-input goto-card-label">Header <br>  <span style="font-weight: normal;">Subtitle</span></div>
    Login or Signup to reply.
  2. 0

    You can approach your problem using ::first-line pseudo-element to the first line of the text within div element.

    .goto-card-label::first-line {
  font-weight: bold;
}
    <div class="html-input goto-card-label">Header <br> Subtitle</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search