Kann man (mehrere) Schriftstile in CSS `content` verwenden?

Ich habe ein CSS-Element bekommt einrichten einige Inhalte einfügen, über:Kann man (mehrere) Schriftstile in CSS `content` verwenden?

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

ich das Wort „Bold“ möchte in fettem Schrift Gewicht und das Wort „kursiv“ gemacht werden, um in kursivem Schriftschnitt wiedergegeben werden. Ich weiß, dass es möglich ist, Zeilen hinzuzufügen:

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

Aber dies wird beide Wörter fett und kursiv machen. Wenn ich HTML-Elemente innerhalb des Inhaltsfeld verwenden could würde ich setzen so etwas wie:

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

Aber leider das ist nicht möglich.

Gibt es eine andere Möglichkeit, diesen Effekt zu erzielen? Im Idealfall ohne Javascript aufzurufen und rein mit html/css.

Quelle

2015-07-24 Alec Jacobson

Ich denke nicht so (hack?), Aber ich werde interessiert sein, um zu sehen, ob jemand das ausarbeiten kann. –

Scheint unmöglich, nach den Antworten [1] (http://stackoverflow.com/questions/4505093/css-content-property-is-it-possible-to-insert-html-instead-of-text) und [2] (http://stackoverflow.com/questions/22511499/add-html-tag-inside-css-content-property). Es wird wahrscheinlich als Duplikat markiert sein. – Stickers

anders als '.foo: before {font-weight: bold; } 'und dann' .foo: after {font-style: kursiv; } Ich würde das auch gerne wissen. Scheint es, dass es nicht möglich ist, nur eine Pseudo zu machen, ohne das Markup zu ändern? – s0rfi949

Es ist oben erwähnt, aber wenn Sie einen :before und nicht :after zu sicher hinzufügen, wie es ohne JS erreicht werden kann ..

.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; 
}

Außerdem enthält es überall schwimmt, aber, hey! es funktioniert :)

bestellen hier: http://codepen.io/achoukah/pen/gpBopd

EDIT:

Heres das gleiche, aber mit 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; 
}

Quelle

2015-07-25 13:05:14 achoukah

Sie haben tun andere Pseudo-Elemente als 'nach'/'vor', wie erste Zeile oder Anfangsbuchstabe, die, mit etwas Fantasie, vielleicht auf die besonders Fall verwenden:
w3schools Pseudo-elements
Aber ‚innerhalb‘ die zuerst 2 Ich glaube, Sie nicht nichts mehr tun, wie @ s0rfi949 hingewiesen.

Quelle

2016-11-07 15:00:20

Kann man (mehrere) Schriftstile in CSS `content` verwenden?

Antwort

Verwandte Themen