How to Apply :after Effects to :hover Elements in CSS?

How to Combine :after and :hover Effectively

When utilizing CSS, it's possible to combine the :after and :hover pseudo-selectors to create dynamic effects. However, achieving this can be challenging.

Consider the provided code, where a list is enhanced with a selected class that adds an arrow shape using :after. The goal is to apply the same arrow shape to items that are being hovered over.

#alertlist {
  list-style: none;
  width: 250px;
}

#alertlist li {
  padding: 5px 10px;
  border-bottom: 1px solid #e9e9e9;
  position: relative;
}

#alertlist li.selected,
#alertlist li:hover {
  color: #f0f0f0;
  background-color: #303030;
}

#alertlist li.selected:after {
  position: absolute;
  top: 0;
  right: -10px;
  bottom: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #303030;
  content: "";
}

To combine the :after effect with :hover, simply append :after to the #alertlist li:hover selector in the same way it's done for #alertlist li.selected:

#alertlist li.selected:after, #alertlist li:hover:after
{
    position:absolute;
    top: 0;
    right:-10px;
    bottom:0;

    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #303030;
    content: "";
}

By doing this, the arrow shape will now appear on both list items with the selected class and items that are being hovered over.

The above is the detailed content of How to Apply :after Effects to :hover Elements in CSS?. For more information, please follow other related articles on the PHP Chinese website!