How to color specific word in a container using CSS

Question

Suppose I have a container:

 
 This is a red apple 

How to color a word \"red\" with red color? Some

Answer 1

Use pseudo elements to add the coloured word and some careful positioning to cover the initial black instance. It's dirty, but it works.

#container
{
    position: relative;
    font-family: monospace;
    margin: 0;
    padding: 0;
    font-size: 15px;
}

#container:after
{
    content: "red";
    color: red;
    position: absolute;
    left: 90px
}

Demo

---

EDIT: Also, a variation that works with proportional fonts (but doesn't render quite so cleanly, at least for me, in Chrome):

#container
{
    position: relative;
    margin: 0;
    padding: 0;
}

#container:before
{
    content: "This is a ";
    position: absolute;
    z-index: 2
}

#container:after
{
    content: "This is a red";
    color: red;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1
}

Demo 2