Question 295103 in CSS Question posted in
Some basic documentation can be found here.

Css – No background animation on ::before pseudo element for anchor tags

I want a background color transition on my anchor tags that goes from left to right whenever I hover upon them but the background is not visible, instead an underline is only visible.

.project a {
  font-size: 27px;
  text-decoration: none;
  position: relative;
  color: rgb(190, 190, 190);
  display: inline-block;
  overflow: hidden;
}

.project a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background-color: #3498db;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}

.project a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.project a:hover {
  color: rgb(240, 240, 240);
}

This is the CSS I’ve used for my anchor tag. There is no other CSS for the anchor tags in the entire file.

I tried to implement the animation without pseudo elements, I tried keyframes but the animation I wanted was only possible with pseudo elements. The animation is working as I can the my desired animation to occur as an underline under the anchor tags, but I want the animation of the background to be visible.

Tags:

2

Answers


  1. 0

    In order to make the background animation visible, you can try instead of using the ::after pseudo-element, you can utilize the ::before pseudo-element for the background animation.

    this is my code and check this and let me know your situation.

    .project a {
  font-size: 27px;
  text-decoration: none;
  position: relative;
  color: rgb(190, 190, 190);
  display: inline-block;
  overflow: hidden;
}

.project a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background-color: #3498db;
  transition: width 0.3s ease;
  z-index: -1; /* Ensure the background is behind the text */
}

.project a:hover::before {
  width: 100%;
}

.project a:hover {
  color: rgb(240, 240, 240);
  text-decoration: none; /* Remove the underline on hover */
}
    Login or Signup to reply.
  2. 0 
    .project a {
  font-size: 27px;
  text-decoration: none;
  position: relative;
  color: rgb(190, 190, 190);
  display: inline-block;
  overflow: hidden;
}

.project a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background-color: #3498db;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}

.project a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.project a:hover {
  color: rgb(240, 240, 240);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search