Geek Answers Handbook

Can I use (multiple) font styles in CSS `content`?

I have a CSS element configured to insert some content through:

.foo:after { content: "Bold, italics"; }

I would like the word "Bold" to be displayed in bold and the word "italic" to be displayed in italic style. I know that you can add lines:

 font-weight: bold; font-style: italics;

But that will make both words bold and italic. If I could use the html elements inside the content field, I would add something like:

 content: "<strong>Bold</strong>, <em>italics</em>"

But alas, this is not possible.

Is there any other way to achieve this effect? Ideally, without calling javascript and purely using html / css.

+5
source share
2 answers

You have other pseudo-elements than 'after' / 'before', for example the first line or the first letter , which, with some imagination, perhaps you could use in your specific case:
w3schools Pseudo Elements
But "inside" these first 2 I think that you can’t do anything else, for example, indicated @ s0rfi949.

+1
source

This is mentioned above, but unless you add :before and :after not too sure how to do this without JS ..

 .foo { float: left; } .foo:after { content: "Bold, "; font-weight: bold; float: right; margin-left: .5em; display: block; } .foo:before { content: 'Italic'; font-style: italic; float: right; margin-left: .5em; display: block; }

It also contains floats everywhere, but hey! it works:)

Check here: http://codepen.io/achoukah/pen/gpBopd

EDIT:

It goes the same, but with a flexible box:

 .foo { width: 100%; clear: both; display: flex; } .foo:before { content: "Bold, "; font-weight: bold; margin-left: .5em; order: 1; } .foo:after { content: 'Italic'; font-style: italic; margin-left: .5em; order: 2; }
0
source

More articles:


All Articles