I designed a DIV with a unique "arrow" feature at the bottom, resembling a speech bubble commonly seen in comic books, which appears when hovered over:
The arrow effect is achieved using the :after and :before pseudo-elements.
For the hover state, I included a transition for the border color and box shadow.
However, I encountered an issue where the arrow simply "appears" without a smooth fade like the other elements. I am struggling to target the arrow specifically, as using "All" does not seem to work. My goal is to introduce a delay on the arrow and incorporate a simple fade or wipe effect.
Check out the CSS code below for reference:
.item-selector-button {
// CSS properties here
}
.item-selector-button .title {
// CSS properties here
}
// and so on for the remaining elements