How To Target Certain Text To Make Bold Using Css

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('

Solution 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('<divclass="tag" >'+ '<span>Badge Name:</span> '+ item.badgename + '</div>'+ '<br>');

Solution 2:

Change your code to this:

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

Then in your CSS add a style for the badge class that makes it bold.

.badge{ font-weight:bold; }

Hope this helps!

Solution 3:

By modifying your HTML, the CSS could be simplified. To get this to work, you would be best off wrapping Badge Name: in a seperate <span>. As this:

<div class='badge'>
  <spanclass='name'>Badge Name: </span>this is a name
</div>
<br />

With styling on span.name.

JSBin here

Share