:hover effect on p:after in specific div

Question

I cant seem to properly activate the :hover state for p elements inside a parent div

For all p elements in the parent div there is an :after with 0 width to create an underlining when hovered. I want the width to go from "0" to "2em" when the p is hovered.

I'm not sure how to properly target the p and the :after when hovered.

I though it should look something like below.

HTML

<div class="parent">
    <p>Menu Option A</p>
    <p>Menu Option B</p>
</div>

CSS

.top_menu_wrapper p:after {
  content: "";
  display: block;
  height: 3px;
  width: 0em;
  background: white;
  margin: auto;
  transition: all 0.4s ease;
}
.parent p:hover p:after {
  width: 2em;
}

Possible duplicate of [Combine :after with :hover](https://stackoverflow.com/questions/13233991/combine-after-with-hover) — Cornel Raiu, Jul 04 '17 at 20:19

Obsidian Age · Answer 1 · 2017-07-04T20:19:57.523

If I understand your structure correctly, you're trying to target the :hover of the :after of any <p> tag within the parent class.

To do this, you simply need to combine the two pseudo-selectors as one:
.parent p:hover:after.

The will target any <p> child of .parent. If you want to target any <p> tag that is a direct child of the .parent class, you can use the greater than symbol (>) as .parent > p:hover:after.

I've added some content to the target selector to help illustrate this.

.parent > p:hover:after {
  width: 2em;
  content: " - Hi there";
}

<div class="parent">
  <p>Menu Option A</p>
  <p>Menu Option B</p>
</div>
<p>Doesn't get the :after effect</p>

Hope this helps! :)

and still, you awarded a later answer :) you should definitely award this one as the answer as it is the most complete and it was the first one to answer the question :) — Cornel Raiu, Jul 04 '17 at 20:26

score 0 · Answer 2 · answered Jul 04 '17 at 20:17

0

Combine :after with :hover this would work:

.parent p:hover:after {
    width: 2em;
}

answered Jul 04 '17 at 20:17

Cornel Raiu

2,758
3
22
31

score 0 · Accepted Answer · answered Jul 04 '17 at 20:17

0

If i understand correctly - it's the same p you hover you want to manipulate.

So. It's the .parent p:hover p:after it's wrong with.

:hover and :after should be appended onto each other

like this:

 .parent p:hover:after {
   width: 2em;
 }

answered Jul 04 '17 at 20:17

Peter Højlund Palluth

853
9
26

:hover effect on p:after in specific div

3 Answers3