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='' xmlns: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:

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.