Change Color of Text Within Paragraph Without Using Span?

user_893462 0
Viewed 74

CSS has advanced a lot over the years and I was wondering if there might be a way to change the color of part of the text in a paragraph without using a span? For example, would there be any way in CSS to make the first 10 characters of a paragraph red?

formatting colors css text html
1 Answers

The classic background coloration but you need a monospace font for this

span {
  font-family:monospace;
  font-size:25px;
  color:#0000;
  background:
    /* 10 characters in red and the remaining in black */
    linear-gradient(90deg, red 0 10ch, #000 0);
  -webkit-background-clip:text;
  background-clip:text;
}
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque congue malesuada efficitur. Etiam ut rhoncus diam. Proin a maximus erat, quis ultrices nisl. Aenean tincidunt risus id massa tempor tempor. Mauris ac odio pulvinar elit porta tincidunt. Curabitur sit amet mauris vitae tortor </span>

user_86203330
Related