Modify the color of a particular character in a CSS text box when hovered over

Question

Modify the color of a particular character in a CSS text box when hovered over

I am facing a challenge in changing the color of two specific characters when hovering over them inside a textbox that is styled purely with CSS.

As the content is created using only CSS, I am unable to use style tags to accomplish this and feel stuck.

My goal is to have the "<" and ">" characters turn red when hovered over within the #CODESTUDENT:hover:after code.

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

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

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

I have attempted to add color properties but have not been successful in resolving this issue.

javascript jquery html css

Answer 1

Answer №1

If you need to customize HTML text, consider adding the phrase "CODER AT WORK" within the tag and apply the following CSS styles:

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

#CODERATWORK {
  opacity: 0;
}

#CODERATWORK:hover {
  opacity: 1;
}

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

You have the flexibility to remove these styles for #CODERATWORK while still maintaining its presence on the webpage. Check out this example on CodePen for reference.

Answer 2

If you need to customize HTML text, consider adding the phrase "CODER AT WORK" within the tag and apply the following CSS styles:

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

#CODERATWORK {
  opacity: 0;
}

#CODERATWORK:hover {
  opacity: 1;
}

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

You have the flexibility to remove these styles for #CODERATWORK while still maintaining its presence on the webpage. Check out this example on CodePen for reference.

Answer 3

Answer №2

Are you familiar with using Javascript? If so, this method could be a suitable 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>

Answer 4

Are you familiar with using Javascript? If so, this method could be a suitable 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>

Answer 5

Answer №3

Check out this innovative approach to approximate the desired effect by utilizing a different pseudo element and adjusting 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 suggestion involves incorporating background coloration in the after element for a similar effect. This method may also require knowledge of the width occupied by < and >.

#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>

Answer 6

Check out this innovative approach to approximate the desired effect by utilizing a different pseudo element and adjusting 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 suggestion involves incorporating background coloration in the after element for a similar effect. This method may also require knowledge of the width occupied by < and >.

#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>

Answer 7

Answer №4

Check out this unique approach that utilizes pure CSS: https://jsfiddle.net/wb34yzLh/1/

The technique involves creating the word with the before pseudo element

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

Subsequently, the word is reassembled on hover using both before and after to allow for individual letter coloring.

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

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

To finish off, we designate the single letter in after as red and change the color of the first letter to red upon hovering.

 #CODESTUDENT::after {
   color: red;
 }

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

Answer 8

Check out this unique approach that utilizes pure CSS: https://jsfiddle.net/wb34yzLh/1/

The technique involves creating the word with the before pseudo element

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

Subsequently, the word is reassembled on hover using both before and after to allow for individual letter coloring.

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

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

To finish off, we designate the single letter in after as red and change the color of the first letter to red upon hovering.

 #CODESTUDENT::after {
   color: red;
 }

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

Answer 9

Answer №5

I completely agree with the sentiments expressed in other responses regarding the proper use of pseudo elements. However, here's a quirky method to achieve a similar effect without modifying 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>

This technique involves swapping an SVG data URL on the hover state, which includes the following SVGs:

<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 additional CSS tweaks, this approach might even appear somewhat presentable :).

Answer 10

I completely agree with the sentiments expressed in other responses regarding the proper use of pseudo elements. However, here's a quirky method to achieve a similar effect without modifying 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>

This technique involves swapping an SVG data URL on the hover state, which includes the following SVGs:

<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 additional CSS tweaks, this approach might even appear somewhat presentable :).

Answer 11

Answer №6

Follow these steps to achieve your desired outcome

HTML:

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

CSS:

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

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

Thank you

Answer 12

Follow these steps to achieve your desired outcome

HTML:

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

CSS:

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

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

Thank you

Modify the color of a particular character in a CSS text box when hovered over

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Obtaining the header with jQuery leads to receiving no content

End the div element upon completion of the Vimeo video

What methods do web browsers use to detect when a user has viewed a custom image on a webpage?

reasons why my custom attribute directive isn't functioning properly with data binding

Creating a personalized notification box that is compatible with various screen sizes and web browsers on android devices with the help of

Halt the countdown of a Jquery or Javascript timer

Tips on showcasing Java map information obtained from the backend on an Angular/Typescript interface

Strategies for resolving a mix of different data types within a single parameter

Django fails to display the initial image on the template

Retrieving a targeted data point from a JSON object

Discovering user activity through rooms within SocketIO

Should I be concerned about including a non-existent CSS class?

How can I maintain the hover state even when the mouse is not hovering over it in CSS?

How come the transition does not take effect when removing and adding the class to the same element with the removeClass() and addClass() methods?

Step-by-step guide for importing a JSON file in React typescript using Template literal

div with a fixed element inside that is scrollable

Using HapiJs in Node.js to communicate data back and forth with the client

What is the best way to display photos horizontally instead of vertically on a webpage?

The issue of Next.JS fetch not caching data within the same request

Could Angular be automatically applying margins or padding to my component?