target values in CSS inside an inline element

StackOverflow https://stackoverflow.com/questions/16811678

  •  30-05-2022
  •  | 
  •  

Question

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?

Was it helpful?

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top