How to write hover condition for a before and a after

Question

How to write  hover and  visited condition for a before   I m trying a before hover but it s not working

User · Answer

BoltClock s answer is correct  The only thing I want to append is that if you want to only select the pseudo element  put in a span    For example     lt li gt  lt span data-icon  u  gt  lt  span gt  List Element  lt  li gt    instead of    lt li gt  data-icon  u  List Element lt  li gt    This way you can simply say  ul  data-icon  hover  before  color   f7f7f7     which will only highlight the pseudo element  not the entire li element

User · Answer

Try to use  card-listing hover  after hover and after using    it wil work

User · Answer

To change menu link s text on mouseover   Different language text on hover  here is the   jsfiddle example  html    lt a align  center  href     gt  lt span gt kannada lt  span gt  lt  a gt    css   span       font-size 12px    a       color green    a hover span       display none    a hover before       color red      font-size 24px      content

User · Answer

Write a hover  before instead of a  before hover  example

User · Answer

This depends on what you re actually trying to do  If you simply wish to apply styles to a  before pseudo-element when the a element matches a pseudo-class  you need to write a hover before or a visited before instead  Notice the pseudo-element comes after the pseudo-class  and in fact  at the very end of the entire selector   Notice also that they are two different things  calling them both  quot pseudo-selectors quot  is going to confuse you once you run into syntax problems such as this one  If you re writing CSS3  you can denote a pseudo-element with double colons to make this distinction clearer  Hence  a hover  before and a visited  before  But if you re developing for legacy browsers such as IE8 and older  then you can get away with using single colons just fine  This specific order of pseudo-classes and pseudo-elements is stated in the spec   One pseudo-element may be appended to the last sequence of simple selectors in a selector  A sequence of simple selectors is a chain of simple selectors that are not separated by a combinator  It always begins with a type selector or a universal selector  No other type selector or universal selector is allowed in the sequence  A simple selector is either a type selector  universal selector  attribute selector  class selector  ID selector  or pseudo-class   A pseudo-class is a simple selector  A pseudo-element  however  is not  even though it resembles a simple selector  However  for user-action pseudo-classes such as  hover1  if you need this effect to apply only when the user interacts with the pseudo-element itself but not the a element  then this is not possible other than through some obscure layout-dependent workaround  As implied by the text  standard CSS pseudo-elements cannot currently have pseudo-classes  In that case  you will need to apply  hover to an actual child element instead of a pseudo-element   1 Of course  this does not apply to link pseudo-classes such as  visited as in the question  since pseudo-elements aren t links

User · Answer

You can also restrict your action to just one class using the right pointed bracket        as I have done in this code    lt  DOCTYPE html gt   lt html lang  en  gt   lt head gt     lt meta charset  UTF-8  gt     lt title gt Document lt  title gt     lt style type  text css  gt      span       font-size 12px            a           color green             test1 gt a hover span           display none             test1 gt a hover before           color red          content  Apple            lt  style gt   lt  head gt    lt body gt     lt div class  test1  gt       lt a href     gt  lt span gt Google lt  span gt  lt  a gt     lt  div gt     lt div class  test2  gt       lt a href     gt  lt span gt Apple lt  span gt  lt  a gt     lt  div gt   lt  body gt    lt  html gt    Note  The hover before switch works only on the  test1 class

User · Answer

or you can set pointer-events none to your a element and pointer-event all to your a before element  and then add hover CSS to a element a      pointer-events none    a before      pointer-events all   a hover before      background blue

[css] How to write :hover condition for a:before and a:after?

Examples related to css

Examples related to css-selectors

Examples related to pseudo-element

Examples related to pseudo-class