Is it possible to animate ::marker which has content defined explicitly ?

I tried rotating the marker but it doesn't work . Here is the codepen https://codepen.io/sougataghar47/pen/qEWMVPY

CodePen

...

8 Replies

Mannix•2d ago

::marker only allows limited amount of properties to be use https://developer.mozilla.org/en-US/docs/Web/CSS/::marker#allowable_properties

MDN Web Docs

::marker - CSS: Cascading Style Sheets | MDN

The ::marker CSS pseudo-element selects the marker box of a list item, which typically contains a bullet or number. It works on any element or pseudo-element set to display: list-item, such as the and elements.

i_lost_to_loba_kreygasmOP•2d ago

  details[open] summary::marker {
    font-weight: bold;
    transform:rotate(90deg);
    transition:rotate .2s ease;
  }
summary{
  font-size:20px;
  cursor:pointer;
  transition:rotate .2s ease;
}
summary::marker{
  content:'+ ';
  font-weight:bold;
  vertical-align:middle;
  transition:rotate .2s ease;
}

  details[open] summary::marker {
    font-weight: bold;
    transform:rotate(90deg);
    transition:rotate .2s ease;
  }
summary{
  font-size:20px;
  cursor:pointer;
  transition:rotate .2s ease;
}
summary::marker{
  content:'+ ';
  font-weight:bold;
  vertical-align:middle;
  transition:rotate .2s ease;
}

this doesnt work

Mannix•2d ago

transition is not a transform my guy i would hide the marker and use pseudo element like ::before

i_lost_to_loba_kreygasmOP•2d ago

this came to my head as well but thought there should be a better way but gonna try it 🙂

Chris Bolson•2d ago

In your current Ccodepen you ~~aren't~~ weren't (I see that you have now added it) actually telling it to rotate. You had defined the transition but, as @Mannix has pointed out, you hadn't defined the transform (or rotate) when the details are open. "transition" is only defining how an element will move/rotate/change etc. It is not actually telling the element to do it. That said, even if you do add the transform I don't think that it will work. Your best bet is to add your own marker, again as Mannix has suggested.

i_lost_to_loba_kreygasmOP•2d ago

summary::after {
  content: '+';
  position: absolute;
  right: 0px;
  font-weight: bold;
  transition: transform 0.2s ease;
  transform: rotate(0deg);
}
details[open] summary::after {
  transform: rotate(45deg);
}

summary::after {
  content: '+';
  position: absolute;
  right: 0px;
  font-weight: bold;
  transition: transform 0.2s ease;
  transform: rotate(0deg);
}
details[open] summary::after {
  transform: rotate(45deg);
}

why does it need position:absolute to work properly ? If I remove it , it doesn't work

Kevin Powell•this hour

pseudo-elements don't have a display type by default, so they need something to tell them how to render on the page. Giving them a position does that, which is why you need the position: absolute there. You can also use declare a display value... or, if the parent is flex or grid, that makes them a grid or flex item, so they'll appear then too. (all assuming you have content as well).

i_lost_to_loba_kreygasmOP•21h ago

thank you so much for replying but I noticed it doesn't work with position:relative

Gaming

Programming

Is it possible to animate ::marker which has content defined explicitly ?

Did you find this page helpful?