CSS Content Bold Single Word

CSS content bold single word

OK, how's this for a creative solution? Draw the text as an SVG, and use this as the content value of the :after pseudo-element in the form of a data URI:

header h1:after{
    content:url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='14' width='85'><text style='alignment-baseline:hanging;font-size:14px;font-family:Arial,sans-serif;fill:#000;'><tspan style='alignment-baseline:inherit;font-weight:bold;'>Bold</tspan> not bold</text></svg>");
}

Here it is in action: http://jsfiddle.net/ojx5s0kc/1/

I think this is as close as you'll get to rich text formatting on a single pseudo-element.

Note: I tested this on Chrome, but I believe that IE requires you to encode the SVG code as a valid URI (i.e. you need to encode all those brackets, spaces etc.). You could probably use a tool like this.

how to bold words within a paragraph in HTML/CSS?

<p><strong>This is in bold.</strong> This is not.</p>

You might find Mozilla Developer Network to be a very handy and reliable reference.

Set a single word many times to bold

Very simply way you can solve it.
Just add this jQuery code:

Live view

$(document).ready(function(){
   // we define and invoke a function
    $("div").text(function () {
      $("body").html($("body").html().replace(/Arduino/g,'<b>Arduino</b>'));
    });

});

How to target certain text to make bold using css

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

make text bold in the middle of the sentence

Your bold text is going to a new line because the main container, .content, is display: flex and flex-direction: column which will put every new group under the previous.

To prevent the bold text going to the next line, put the whole sentence into its own tag of some sort such as a span.

<span>This is called <strong>underfitting</strong>. A polynomial of degree 4 approximates</span>

---

Related Topics