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??

possible duplicate of [CSS to increase size of first word](http://stackoverflow.com/questions/55612/css-to-increase-size-of-first-word) — Tushar, Aug 28 '15 at 07:24
Using `:before` and `:after` positioned absolutely might be a solution. In `:before` you could put bolded text, then in `:after` you could put normal text. I don't know exactly, what is expected as a final result. — sunpietro, Aug 28 '15 at 07:24

score 10 · Accepted Answer · answered Aug 28 '15 at 14:15

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.

score 6 · Answer 2 · answered Aug 28 '15 at 07:27

6

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

answered Aug 28 '15 at 07:27

Fabrizio Calderan

120,726
26
164
177

that would mean half the text was before the parent div and half after? – Alex Aug 28 '15 at 07:32
1

exactly @alex: note that from an accessibility or semantic perspective this solution should not be worst than using a single pseudoelement. if semantic or accessibility matter then this text must be included in the markup – Fabrizio Calderan Aug 28 '15 at 07:34
What if we are making it localization ? In that case non of the mentioned answers will work – Optimist Rohit Jan 31 '22 at 09:18

score 1 · Answer 3 · answered Sep 25 '17 at 19:33

Building off of Jared's answer, here are some helpful tags to include within the url:

Start

content:url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><text style='alignment-baseline:hanging;font-size:14px;font-family:Arial,sans-serif;fill:#008ef4;'>

New Line

<tspan x='-4' dy='14'> </tspan>

This is moving the cursor down 14px, and setting it to absolute -4 px x to account for the space (The space must be there or the tag will not render)

Bold

<tspan style='alignment-baseline:inherit;font-weight:bold;fill:#5b5b5b;'> Your Text Here </tspan>

Italic

<tspan style='alignment-baseline:inherit;font-style:italic;fill:#5b5b5b;'> Your Text Here </tspan>

End

</text></svg>");

Here's a Fiddle:

JSFiddle

And here is a google sheet I made to convert html into this SVG code: (Keep in mind this only works with <b>, <i>, <br> tags)

Google Sheet

CSS content bold single word

3 Answers3

Linked