How to make a hover effect for pseudo elements?

by

You can change the pseudo-element based on hover of the parent:

JSFiddle DEMO

#button:before {
    background-color: blue;
    content: "";
    display: block;
    height: 25px;
    width: 25px;
}

#button:hover:before {
    background-color: red;
}


#button {    display: block;
    height: 25px;
    margin: 0 10px;
    padding: 10px;
    text-indent: 20px;
    width: 12%;}

#button:before { background-color: blue;
    content: "";
    display: block;
    height: 25px;
    width: 25px;}

#button:hover:before { background-color: red;}
<div id="button">Button</div>

More Related Contents:

  1. How do I access style properties of pseudo-elements with jQuery? [duplicate]
  2. How do you add pseudo classes to elements using jQuery?
  3. How to change the bootstrap css width into 1000px? [closed]
  4. jquery change section with scrolling and animation
  5. Click button copy to clipboard
  6. jQuery get the rendered height of an element?
  7. Is it possible to style a select box? [closed]
  8. Show div on scrollDown after 800px
  9. Stopping fixed position scrolling at a certain point?
  10. What is the easiest way to disable/enable buttons and links (jQuery + Bootstrap)
  11. How to get header from cards or similar to have the same height with flex box?
  12. How to define multiple CSS attributes in jQuery?
  13. How to remove close button on the jQuery UI dialog?
  14. resize font to fit in a div (on one line)
  15. jQuery on window resize
  16. what’s faster? CSS3 transitions or jQuery animations?
  17. how to replicate pinterest.com’s absolute div stacking layout [closed]
  18. Selecting elements with a certain background color
  19. How to fix a header on scroll
  20. How to fade loop background images?
  21. Why is z-index ignored with position:static?
  22. Difference between CSS selector and jQuery filter?
  23. Bootstrap CSS Active Navigation
  24. JQM (jQueryMobile) Dynamically added elements not displaying correctly and CSS is not applied
  25. if checkbox checked add class to parent element
  26. Overriding CSS styles of the jQuery UI Tooltip widget
  27. JQuery search in static HTML page with highlighting of found word
  28. The .fadeOut() method to use visibility property instead of display property
  29. Bootstrap Carousel showing next and previous image
  30. Possible to have a floating horizontal scrollbar?

Leave a Comment