È possibile utilizzare (più) stili di carattere all'interno del contenuto `CSS`?

Question

Ho un elemento CSS istituito per inserire alcuni contenuti, attraverso:

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

mi piacerebbe la parola "Bold" da rendere in un audace font-weight e la parola "corsivo" per essere reso in stile font in corsivo. So che è possibile aggiungere righe:

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

Ma questo renderà entrambe le parole in grassetto e in corsivo. Se io uso could elementi HTML all'interno del campo del contenuto metterei qualcosa di simile:

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

Ma, ahimè, che non è possibile.

C'è un altro modo per ottenere questo effetto? Idealmente senza invocare javascript e usando esclusivamente html/css.

Answer 1

E 'di cui sopra, ma a meno che non si aggiunge un :before e non :after troppo sicuro come può essere realizzato senza 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; 
} 

Contiene anche carri allegorici in tutto il mondo, ma, ehi! funziona :)

controllare qui: http://codepen.io/achoukah/pen/gpBopd

EDIT:

Heres lo stesso, ma con 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; 
} 

Answer 2

Si ha altri elementi pseudo di "dopo"/"prima", come prima riga o prima lettera, che, con una certa fantasia, forse si potrebbe utilizzare sul vostro particolare caso:
w3schools Pseudo-elements
Ma 'all'interno' quei primi 2 penso che non si può fare niente di più, come @ s0rfi949 sottolineato.