Menu
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??
484
To bold text simply for decoration, use the CSS font-weight property instead of the HTML strong element. Let's say you want to bold a word in a paragraph — you'd wrap the word in <span> tags and use a CSS class selector to apply the font-weight property to the specific span element only.
CSS provides several more options that allow you to set different levels of boldness for text. Many fonts have various weights associated with them; these weights have the effect of making the text look more or less bold. CSS can take advantage of this feature (Figure 3.9).
Make text bold . Click Bold. in the Font group on the Home tab. Type the keyboard shortcut: CTRL+B.
To create a CSS bold text effect, you must use the font-weight property. The font-weight property determines the “weight” of a font, or how bold that font appears. You can use keywords or numeric values to instruct CSS on how bold a piece of text should be.
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.
116
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
4
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
