Change specific character color in CSS writen textbox on hover

Question

I'm trying to change the color of 2 very specific characters when hovering it, in a textbox with content made purely in CSS.

Since it's not written in HTML but CSS, I can't specifically add style tags to do this and I'm lost.

What I want is the #CODESTUDENT:hover:after code to make the "<" & ">" red on hover.

#CODESTUDENT:after {
  content: "CODE STUDENT";
}

#CODESTUDENT:hover:after {
  content: "<CODE STUDENT>";
}

<li id="CODESTUDENT"></li>

I've tried adding color properties etc, I've not been able to fix this.

this is not possible, you can only set the color for the whole word. If you only need to set the style for < and > then you need to somehow seperate them from the rest of the text. — cloned, May 14 '19 at 11:03
Possible duplicate of [Change color of one character in a text box HTML/CSS](https://stackoverflow.com/questions/17341670/change-color-of-one-character-in-a-text-box-html-css) — Syed mohamed aladeen, May 14 '19 at 11:04

score 2 · Answer 1 · answered May 14 '19 at 11:11

Can you use Javascript? If so, this would be a viable approach:

for (const div of document.querySelectorAll('div')) {
  div.textContent = div.id;
}

div::before,
div::after {
  color: red;
}
div:hover::before {
  content: "<";
}
div:hover::after {
  content: ">";
}

<div id="CODESTUDENT"></div>
<div id="FOO"></div>
<div id="BAR"></div>
<div id="BAZ"></div>

score 2 · Accepted Answer · answered May 14 '19 at 11:13

If you can add text to HTML (depends on your demands) add "CODE STUDENT" inside HTML's tag and use such styles:

#CODESTUDENT:hover::before {
  content: "<";
  color:red;
}

#CODESTUDENT{
  opacity:0;
}

#CODESTUDENT:hover{
  opacity:1;
}

#CODESTUDENT:hover:after {
  content: ">";
  color: red;
}

You can always remove styles for #CODESTUDENT and it'll remain on site. https://codepen.io/ptr11dev/pen/dEOdxQ

score 2 · Answer 3 · answered May 14 '19 at 11:15

Here is a hacky idea where you can approximate this using the other pseudo element and playing with margin/letter-spacing.

#CODESTUDENT:after {
  content: "CODE STUDENT";
}

#CODESTUDENT:hover:after {
  content: "CODE STUDENT";
  margin-left:-190px;
}
#CODESTUDENT:hover:before {
  content: "< >";
  letter-spacing:60px;
  color:red;
}

<li id="CODESTUDENT"></li>

Another idea is to consider background coloration on the after element. Still hacky as you need to know the width taken by the < \ >

#CODESTUDENT:after {
  content: "CODE STUDENT";
}

#CODESTUDENT:hover:after {
  content: "<CODE STUDENT>";
  background:
    linear-gradient(red,red) left /10px 100% no-repeat,
    linear-gradient(red,red) right/10px 100% no-repeat,
    #000;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

<li id="CODESTUDENT"></li>

score 2 · Answer 4 · answered May 14 '19 at 11:45

Here is another only CSS solution: https://jsfiddle.net/wb34yzLh/1/

Essentially, we're constructing the word with the before pseudo class

 #CODESTUDENT::before {
   content: "CODE STUDENT";
   color: black;
 }

Then reconstruct the word on hover using before and after to be able to color letters individually.

 #CODESTUDENT:hover::before {
   content: "<CODE STUDENT";
 }

 #CODESTUDENT:hover::after {
   content: ">";
 }

Finally, we're coloring the only letter in after, i.e., > red. And the first letter on hover with the color red.

 #CODESTUDENT::after {
   color: red;
 }

#CODESTUDENT:hover::first-letter {
   color: red;
 }

You could generalize your solution with `content: attr(id);` and `content: "<"attr(id);` — connexo, May 15 '19 at 08:37

score 1 · Answer 5 · answered May 14 '19 at 11:42

I wholeheartedly agree with other answers and comments about using pseudo elements like they're meant to be used, but here's a wacky way to do this without touching your html:

#CODESTUDENT:after {
      content: url("data:image/svg+xml,%3Csvg height='30' width='200' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='0' y='15' fill='none'%3E&lt;%3C/text%3E%3Ctext x='15' y='15' fill='black'%3ECODE STUDENT%3C/text%3E%3Ctext x='140' y='15' fill='none'%3E&gt;%3C/text%3E%3C/svg%3E");
    }
    
  
#CODESTUDENT:hover:after {
    content: url("data:image/svg+xml,%3Csvg height='30' width='200' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='0' y='15' fill='red'%3E&lt;%3C/text%3E%3Ctext x='15' y='15' fill='black'%3ECODE STUDENT%3C/text%3E%3Ctext x='140' y='15' fill='red'%3E&gt;%3C/text%3E%3C/svg%3E");
      
    }

<li id="CODESTUDENT"></li>

It works by swapping a svg data url on the hover selector, containing these svg's:

<svg height="30" width="200" xmlns="http://www.w3.org/2000/svg">
  <text x="0" y="15" fill="none">&lt;</text>
  <text x="15" y="15" fill="black">CODE STUDENT</text>
  <text x="140" y="15" fill="none">&gt;</text>
</svg>

<svg height="30" width="200" xmlns="http://www.w3.org/2000/svg">
  <text x="0" y="15" fill="red">&lt;</text>
  <text x="15" y="15" fill="black">CODE STUDENT</text>
  <text x="140" y="15" fill="red">&gt;</text>
</svg>

With some extra css it might even look bareable :).

Rashedul.Rubel · Answer 6 · 2019-05-14T11:24:26.303

-1

you can try as below to serve your purpose

html:

<li id="CODESTUDENT">CODESTUDENT</li>

css:

#CODESTUDENT:hover:before {
  content:"<";
  color:red;
}

#CODESTUDENT:hover:after{
  content:">";
  color:red;
}

Thanks

edited May 14 '19 at 11:24

answered May 14 '19 at 11:17

Rashedul.Rubel

3,446
25
36

Change specific character color in CSS writen textbox on hover

6 Answers6