How to change color part of text on hover pseudo parent

user_9637601 0
Viewed 43

I have a h2 tag and pseudo element. When I hover over h2 tag I want to change color of some part of h2 tag, only parts where pseudo element covers when it is hover over. So I would like to do something like: enter image description here

I tried the following attempt so far

.section-title {
  position: relative;
  display: inline-block;
}

.section-title:before {
  content: " ";
  width: 49%;
  height: 3px;
  position: absolute;
  bottom: 0;
  background-color: red;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.section-description:hover .section-title:before {
  content: "";
  width: 49%;
  height: 49%;
  z-index: -1;
  position: absolute;
  bottom: 0;
  background-color: red;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
<div class="section-description">
  <h2 class="section-title">Our services</h2>
</div>

I would like to know if CSS can achieve this and is there any better or best way.

here it is jsfiddle

css
1 Answers

Use a gradient coloration:

.section-title {
  --h:3px; /* line height */
  --w:30%; /* line width */

  display: inline-block;
  font-size: 50px;
  color: #0000;
  background:
    conic-gradient(from 180deg at var(--w) calc(50% - var(--h)),#fff 90deg,#000  0),
    conic-gradient(from 180deg at var(--w) calc(50% - var(--h)),red  90deg,#0000 0);
  background-size: 100% 200%;
  -webkit-background-clip: text,padding-box;
          background-clip: text,padding-box;
  transition: 0.5s;
}
.section-title:hover {
  background-position: 0 50%;
}
<h2 class="section-title">Our services</h2>

The above won't work on Firefox so here is an alternative:

.section-title {
  --h:3px; /* line height */
  --w:30%; /* line width */

  position: relative;
  display: inline-block;
  font-size: 50px;
  color: #0000;
  background:
    conic-gradient(from 180deg at var(--w) calc(50% - var(--h)),#fff 90deg,#000  0) 0 0/100% 200%;
  -webkit-background-clip: text;
          background-clip: text;
  transition: 0.5s;
}
.section-title:hover {
  background-position: 0 50%;
}

.section-title:before {
  content:"";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: inherit;
  background-image: conic-gradient(from 180deg at var(--w) calc(50% - var(--h)),red 90deg,#0000  0);
  -webkit-background-clip: padding-box;
          background-clip: padding-box;
  
}
<h2 class="section-title">Our services</h2>

Also like below:

.section-title {
  --h:3px; /* line height */
  --w:30%; /* line width */

  font-size: 50px;
  display: inline-block;
  background: conic-gradient(from 180deg at var(--w) calc(50% - var(--h)),red 90deg,#0000  0) 0 0/100% 200%;
  transition: 0.5s;
}
.section-title span{
  display: block;
  color: #0000;
  background:inherit;
  background-image:
    conic-gradient(from 180deg at var(--w) calc(50% - var(--h)),#fff 90deg,#000  0);
  -webkit-background-clip: text;
          background-clip: text;
}

.section-title:hover {
  background-position: 0 50%;
}
<h2 class="section-title"><span>Our services</span></h2>

user_86203330
Related