CSS content bold single word

Question

I have the following CSS which adds some text after an element:

header h1:after {
    content:"Bold \A not bold";
    white-space: pre;
}

My aim is to make the first word bold and the rest of the text not bold.

I know how to make all the text bold, and I know I can achieve this using HTML, but for my present purposes, I want to try and achieve this using CSS.

No search results on this for google, can it be done??

Answer 1

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.

Answer 2

you might split the sentence in two pseudoelements like so:

h1 { font-weight: normal; display: table; }

h1:after {
    content:" Bold";
    font-weight: bold;
}

h1:before {
    content:"not bold";
    display: table-footer-group;
}

Codepen: http://codepen.io/anon/pen/RWbQVw

here I used display: table-footer-group; for :before pseudoelement in order to place it visually below the :after pseudoelement