Question

I often see stylish css effects achieved with the use of ::after css pseudo-selector. For example:

.bs-docs-example::after {
content: "Example";
position: absolute; ...

In this twitter-bootstrap class content property defines the text in the ::after element. Is there any way I can make that dynamic by binding it with KnockoutJS?

Answer 1

I have had to do something similar to this a couple of times before and the way that I did it was to bind to the text of a style element like:

<style type='text/css' data-bind="text: exampleAfterStyle"></style>

with a computed observable like:

var viewModel = {
    name: ko.observable("Bob"),
};

viewModel.exampleAfterStyle = ko.computed(function() {
    return '.example::after { content: "' + viewModel.name() + '"; }';
});

Here is a sample: http://jsfiddle.net/rniemeyer/hfKPc/