Alex Alex - 24 days ago 9
CSS Question

CSS content bold single word

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 Source

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.