Is it possible to use (multiple) font styles within CSS `content`?

Question

I've got a CSS element set up to insert some content, via:

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

I'd like the word "Bold" to be rendered in a bold font-weight and the word "italics" to be rendered in an italics font-style. I know it's possible to add lines:

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

But this will make both words bold and italics. If I could use html elements inside the content field I would put something like:

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

But alas that's not possible.

Is there another way to achieve this effect? Ideally without invoking javascript and purely using html/css.

I don't think so (hack?), but I'll be interested to see if someone can work that out. — Jared Farrish
– Jared Farrish, Commented Jul 24, 2015 at 22:11
Seems to be impossible, according to the answers 1 and 2. It's probably will be marked as a duplicate. — Stickers
– Stickers, Commented Jul 24, 2015 at 22:20
other than using .foo:before { font-weight: bold; } and then .foo:after { font-style: italics; } I would also love to know this one too. Seems like doing only one psuedo w/o changing the markup isn't possible? — s0rfi949
– s0rfi949, Commented Jul 24, 2015 at 22:22

achoukah · Accepted Answer · 2015-07-25 13:12:50Z

2

It's mentioned above, but unless you add a :before and :after not too sure how it can be accomplished 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 it here: http://codepen.io/achoukah/pen/gpBopd

EDIT:

Heres the same, but with flex-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;
}

edited Jul 25, 2015 at 13:12

answered Jul 25, 2015 at 13:05

achoukah

1,4652 gold badges11 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pedro Ferreira · Accepted Answer · 2016-11-07 15:00:20Z

2

You do have other pseudo elements than 'after'/'before', like first-line or first-letter, which, with some imagination, maybe you could use on your particularly case:
w3schools Pseudo-elements
But 'inside' those first 2 I think you can not do nothing more, like @s0rfi949 pointed out.

answered Nov 7, 2016 at 15:00

Pedro Ferreira

4937 silver badges14 bronze badges

Collectives™ on Stack Overflow

Is it possible to use (multiple) font styles within CSS `content`?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related