You can use the cypress-real-events plugin. To install use the command:

npm i cypress-real-events

Then inside your cypress/support/e2e.{js,ts}, write:

import "cypress-real-events/support";

And in your code you can directly write:

cy.get("selector").realHover('mouse')
//Add assertions

Note: Since the above plugin uses Chrome DevTools Protocols to simulate native events, hence this will only work with Chromium-based browsers, so no firefox.

Into cypress' test try to use the method cy.wait("time here") following hover command. This is very simple but for visual test this is so useful.

In order to access the :before or :after of an element, we have to do a little Cypress and JavaScript magic. This is answer is mostly from this link.

cy.get('.myClass')
.then($els => {
  // get Window reference from element
  const win = $els[0].ownerDocument.defaultView
  // use getComputedStyle to read the pseudo selector
  const before = win.getComputedStyle($els[0], ':before')
  // read the value of the `content` CSS property
  const contentValue = before.getPropertyValue('content')
  
  // The above lines are just how we tell Cypress to get the `:before` value. 
  // There isn't a ton to understand outside of really diving into how elements and windows work together

  expect(content).to.equal('foo');
})

So, using that same example, we can check for any CSS property on the element. For example, font-size:

cy.get('.myClass')
.then($els => {
  const win = $els[0].ownerDocument.defaultView
  const before = win.getComputedStyle($els[0], ':before')
  const fontSize = before.getPropertyValue('font-size') // instead of `'font-size'`, you can substitute any CSS property
  expect(fontSize).to.equal('20');
})

This can also be applied to :after, changing out ($els[0], ':before') with ($els[0], ':after').