Search code examples
csstargeting

target values in CSS inside an inline element

I have a HTML of <span> Day Month </span>

and for CSS I want to target Day seperately and Month seperately (apply different styles to them) without changing the HTML.

How can I do it?

Solution

  • Yeah its possible. You can follow this method. Here font-word is not posible, that have no option in css. But we use content css property

    <!DOCTYPE html>
<html>
<head>
<style>
span {
color: orange;
    }
span:before
{
color: red;
content: "Day";
position: absolute;
}
</style>
</head>
<body>
<span>Day Month </span>
</body>
</html>

    Updated: Here the fiddle Demo