html - How to target certain text to make bold using css

Question

At the moment the CSS selector .tag targets all text in the below and makes it bold. How would I just target the "Badge Name" text below

text to make bold?

wrapper.append('<div class="tag" >'+ 'Badge Name: '+ item.badgename + '</div>'+ '<br>');

Perhaps I need to use a pseudo selector?

Answer 1

Assuming the "Badge Name: " phrase is constant, one approach is using CSS :before pseudo element to generate the content as follows:

EXAMPLE HERE

.tag:before {
    content: "Badge Name: ";
    font-weight: bold;
}

Hence you could remove that phrase from your script:

wrapper.append('<div class="tag" >'+ item.badgename + '</div>'+ '<br>');

Another option is wrapping that phrase by an inline wrapper (a <span> element) and use .tag span selector to apply the proper declarations:

wrapper.append('<div class="tag" >'+ '<span>Badge Name:</span> '+ item.badgename + '</div>'+ '<br>');