Tips for making CSS Hover Transform functional when using relative positioning

Question

Tips for making CSS Hover Transform functional when using relative positioning

I am trying to create a heading text with an arrow that translates when hovered over. Currently, it is achieved using position: absolute, but I need to make it work with position: relative.

Any suggestions on how this can be accomplished?

#container {
  width: 130px;
  border: 1px solid red;
  padding: 10px;
}

#container h2:after {
  transition: all 1s ease
}

#container:hover h2:after {
  transform: translateX(30px);
  transition: all 1s ease;
}

#container h2:after {
  content: "->";
  position: absolute;
  /* It currently works with absolute positioning, but I want it to work with relative positioning. */
}

<div id="container">
  <h2>Go to my website</h2>
</div>

html css css-transitions

Answer 1

Answer №1

Adjust the CSS property #container h2::after to have a value of display: inline-block

#container h2::after {
  transition: all 1s ease;
  display: inline-block;
}

Side note: While using h2:after is not incorrect, pseudo-elements created with before and after should be written with two colons. Pseudo-classes like :hover only use one colon.

Answer 2

Adjust the CSS property #container h2::after to have a value of display: inline-block

#container h2::after {
  transition: all 1s ease;
  display: inline-block;
}

Side note: While using h2:after is not incorrect, pseudo-elements created with before and after should be written with two colons. Pseudo-classes like :hover only use one colon.

Answer 3

Answer №2

Merged two h2:after styles to streamline the code, switched from transform to margin-left in CSS for smoother transition effects, and updated position to relative on the h2 element. Feel free to ask if you have any inquiries.

#container {
  width: 130px;
  border: 1px solid red;
  padding: 10px;
}

#container h2:after {
  transition: all 1s ease;
  content: "->";
  position: relative;
}

#container:hover h2:after {
  margin-left: 30px;
  transition: all 1s ease;
}

<div id="container">
  <h2>Go to my website</h2>
</div>

Answer 4

Merged two h2:after styles to streamline the code, switched from transform to margin-left in CSS for smoother transition effects, and updated position to relative on the h2 element. Feel free to ask if you have any inquiries.

#container {
  width: 130px;
  border: 1px solid red;
  padding: 10px;
}

#container h2:after {
  transition: all 1s ease;
  content: "->";
  position: relative;
}

#container:hover h2:after {
  margin-left: 30px;
  transition: all 1s ease;
}

<div id="container">
  <h2>Go to my website</h2>
</div>

Answer 5

Answer №3

Simply include display:inline-block in the pseudo element style

#box {
  width: 150px;
  border: 2px solid blue;
  padding: 15px;
}

#box p:before {
  transition: all 1s ease
}

#box p:before {
  content: "<-";
  position: relative;
  display: inline-block;
  /* It currently uses absolute positioning, but I prefer using relative positioning. */
}

#box:hover p:before {
  transform: translateX(-30px);
  transition: all 1s ease;
}

<div id="box">
  <p>Click here</p>
</div>

Answer 6

Simply include display:inline-block in the pseudo element style

#box {
  width: 150px;
  border: 2px solid blue;
  padding: 15px;
}

#box p:before {
  transition: all 1s ease
}

#box p:before {
  content: "<-";
  position: relative;
  display: inline-block;
  /* It currently uses absolute positioning, but I prefer using relative positioning. */
}

#box:hover p:before {
  transform: translateX(-30px);
  transition: all 1s ease;
}

<div id="box">
  <p>Click here</p>
</div>

Answer 7

Answer №4

Instead of using transform, try utilizing margin-left

Visit this link for more details

#container h2:after {
  transition: all 1s ease;
  margin-left:5px;
}

#container:hover h2:after {
  margin-left:25px;
  transition: all 1s ease;
}

#container h2:after {
  content: "->";
  position: relative;

}

Answer 8

Instead of using transform, try utilizing margin-left

Visit this link for more details

#container h2:after {
  transition: all 1s ease;
  margin-left:5px;
}

#container:hover h2:after {
  margin-left:25px;
  transition: all 1s ease;
}

#container h2:after {
  content: "->";
  position: relative;

}

Tips for making CSS Hover Transform functional when using relative positioning

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the best way to responsively center an after pseudo-element above its parent?

What are the HTML5 elements that include the "load event" within their onload attribute?

What is the most effective method for preserving RichText (WYSIWYG output)?

Switching Div Elements Created by PHP

Tips for resizing a larger image to display only a specific portion in CSS (and incorporating JS if needed)

Steps for stopping the sass --watch function on a specific folder

What are the steps to adjusting page margins for Kindle devices?

Utilizing background images in conjunction with media queries

Button not triggering .hide() function as expected

One of the paragraphs refuses to align with the others by floating left

submit the JSON formatted data to the server

Using data fetched from PHP in HTML via jQuery post: A step-by-step guide

Innovative Features in Google Chrome

Conceal a different div unless it includes

Is there a way to customize the dot in a JavaFx RadioButton?

Preventing Adjacent Text from Moving Due to a Floated i Element

Is there a way to prevent inheriting width properties? Or perhaps how can one revert back to the original width value

Is it possible to selectively disable the <span> tag in Angular?

Issue with Bootstrap 5 collapse not toggling back on second button press

The issue arises when HTML tables with unique IDs are all displaying the same value from an AJAX callback