How to target certain text to make bold using css


Tags: html,css

Problem :

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?



Solution :

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>');

    CSS Howto..

    SCSS has the color in rgba() format, but the color is in hex format. How to keep the color in RGBA() format in the genrated css?

    How do you align text of one item in nav?

    How to make hover dynamic in CSS?

    How can I point out a specific location in Google Maps?

    how to make this (table) using divs and css

    Give a box an ID, once clicked shows alert of that ID?

    How to force free CSS resize on input element when its width is specified?

    IE8 Not showing divs with floats

    How to position a background image like wanderfly.com?

    How to make CSS border show on radio button click

    How do I center “my” navigation bar?

    If div is visible, than show that content in other div with jQuery

    How to make a space between tags (icons) in table?

    How to use pseudo-class :target within an image map

    How to automatically compile LESS into CSS on the server?

    How can I get the text style from window.selection()?

    How to stylize left part of input range in Metro Apps?

    How to find CSS deceleration for :hover state using Chrome's inspector

    How can I float two tables next to each other left to right and center them both?

    How to switch left and right in a css file?

    CSS: How to switch two background images with fading transition?

    How to change css properties depending on parent, but with the same class name [closed]

    How to override CSS style during hover in a table row?

    How to create a darker background on a whole page with one new div

    How to hide the third nested list in this css dropdown nested lists?

    div shown with jquery is cropped

    How to apply customized css to SSRS report

    How to reject specify HTML tags by using css or xpath selector

    How to animate a height change using javascript and css?

    How to add style or put a class in a php form_submit button