CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Keyan
Keyan

Reputation: 87

Change specific character color in CSS writen textbox on hover

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.

Upvotes: 1

Views: 909

Answers (6)

Clyde D&#39;Souza
Clyde D&#39;Souza

Reputation: 452

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;
 }

Upvotes: 2

Roope
Roope

Reputation: 291

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 :).

Upvotes: 1

Rashedul.Rubel
Rashedul.Rubel

Reputation: 3584

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

Upvotes: -1

Temani Afif
Temani Afif

Reputation: 273750

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>

Upvotes: 2

Vontar
Vontar

Reputation: 64

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

Upvotes: 2

connexo
connexo

Reputation: 56783

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>

Upvotes: 2

Related Questions