{"id":449,"date":"2019-11-08T18:30:16","date_gmt":"2019-11-08T13:00:16","guid":{"rendered":"http:\/\/www.codingheroes.in\/blog\/?p=449"},"modified":"2019-11-08T18:39:38","modified_gmt":"2019-11-08T13:09:38","slug":"how-to-add-hover-on-before-and-after-css-selector","status":"publish","type":"post","link":"https:\/\/myfreeonlinetools.com\/blog\/how-to-add-hover-on-before-and-after-css-selector\/","title":{"rendered":"How to add or write  :hover on ::before and ::after selector in CSS"},"content":{"rendered":"<h1>How to add :hover on ::before and ::after css selector<\/h1>\n<p>Some people find and facing the problem of how to use hover effect on ::before and ::after css selector, but it can be done by simple css code. Below I show how to add hover css on changing before and after selector. Some time :before and :after css selectors are used for add content, image, etc before and after an element.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-450\" src=\"http:\/\/www.codingheroes.in\/blog\/wp-content\/uploads\/2019\/11\/1.jpg\" alt=\"use before and after in hover\" width=\"518\" height=\"123\" srcset=\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/1.jpg 518w, https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/1-300x71.jpg 300w\" sizes=\"auto, (max-width: 518px) 100vw, 518px\" \/><\/p>\n<h3><strong> Do\u00a0 like<\/strong><\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-451\" src=\"http:\/\/www.codingheroes.in\/blog\/wp-content\/uploads\/2019\/11\/2.jpg\" alt=\"before element \" width=\"558\" height=\"156\" srcset=\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/2.jpg 558w, https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/2-300x84.jpg 300w\" sizes=\"auto, (max-width: 558px) 100vw, 558px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Code for doing the above example<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-458\" src=\"http:\/\/www.codingheroes.in\/blog\/wp-content\/uploads\/2019\/11\/3-1.jpg\" alt=\"\" width=\"699\" height=\"354\" srcset=\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/3-1.jpg 699w, https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/3-1-300x152.jpg 300w\" sizes=\"auto, (max-width: 699px) 100vw, 699px\" \/><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>How to add :hover on ::before and ::after css selector Some people find and facing the problem of how to use hover effect on ::before and ::after css selector, but [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":452,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[22],"tags":[],"class_list":["post-449","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-tutorial"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to add or write :hover on ::before and ::after selector in CSS<\/title>\n<meta name=\"description\" content=\"how to add before and after selector on css with use hover effect\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/myfreeonlinetools.com\/blog\/how-to-add-hover-on-before-and-after-css-selector\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to add or write :hover on ::before and ::after selector in CSS\" \/>\n<meta property=\"og:description\" content=\"how to add before and after selector on css with use hover effect\" \/>\n<meta property=\"og:url\" content=\"https:\/\/myfreeonlinetools.com\/blog\/how-to-add-hover-on-before-and-after-css-selector\/\" \/>\n<meta property=\"og:site_name\" content=\"MyFreeOnlineTools\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/LearnSchoolOnline\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-11-08T13:00:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-11-08T13:09:38+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/3.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"699\" \/>\n\t<meta property=\"og:image:height\" content=\"354\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"myfreeonlinetools\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"myfreeonlinetools\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/how-to-add-hover-on-before-and-after-css-selector\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/how-to-add-hover-on-before-and-after-css-selector\/\"},\"author\":{\"name\":\"myfreeonlinetools\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c\"},\"headline\":\"How to add or write :hover on ::before and ::after selector in CSS\",\"datePublished\":\"2019-11-08T13:00:16+00:00\",\"dateModified\":\"2019-11-08T13:09:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/how-to-add-hover-on-before-and-after-css-selector\/\"},\"wordCount\":95,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/how-to-add-hover-on-before-and-after-css-selector\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/3.jpg\",\"articleSection\":[\"CSS Tutorial\"],\"inLanguage\":\"en\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/myfreeonlinetools.com\/blog\/how-to-add-hover-on-before-and-after-css-selector\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/how-to-add-hover-on-before-and-after-css-selector\/\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/how-to-add-hover-on-before-and-after-css-selector\/\",\"name\":\"How to add or write :hover on ::before and ::after selector in CSS\",\"isPartOf\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/how-to-add-hover-on-before-and-after-css-selector\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/how-to-add-hover-on-before-and-after-css-selector\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/3.jpg\",\"datePublished\":\"2019-11-08T13:00:16+00:00\",\"dateModified\":\"2019-11-08T13:09:38+00:00\",\"description\":\"how to add before and after selector on css with use hover effect\",\"breadcrumb\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/how-to-add-hover-on-before-and-after-css-selector\/#breadcrumb\"},\"inLanguage\":\"en\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/myfreeonlinetools.com\/blog\/how-to-add-hover-on-before-and-after-css-selector\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/how-to-add-hover-on-before-and-after-css-selector\/#primaryimage\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/3.jpg\",\"contentUrl\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/3.jpg\",\"width\":699,\"height\":354},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/how-to-add-hover-on-before-and-after-css-selector\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/myfreeonlinetools.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to add or write :hover on ::before and ::after selector in CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#website\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/\",\"name\":\"MyFreeOnlineTools\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/myfreeonlinetools.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#organization\",\"name\":\"MyFreeOnlineTools\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png\",\"contentUrl\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png\",\"width\":387,\"height\":79,\"caption\":\"MyFreeOnlineTools\"},\"image\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c\",\"name\":\"myfreeonlinetools\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g\",\"caption\":\"myfreeonlinetools\"},\"description\":\"Live in Delhi, Working in Gurgaon as Web Designer and Graphic Designer. Developed and Design myfreeonlinetools for online free tools. Also having youtube channel Name with LearnSchoolOnline. Traveling, watching movies, coding are the hobbies.\",\"sameAs\":[\"https:\/\/myfreeonlinetools.com\/\",\"https:\/\/www.facebook.com\/LearnSchoolOnline\/\",\"https:\/\/www.youtube.com\/learnschoolonline\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to add or write :hover on ::before and ::after selector in CSS","description":"how to add before and after selector on css with use hover effect","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/myfreeonlinetools.com\/blog\/how-to-add-hover-on-before-and-after-css-selector\/","og_locale":"en_US","og_type":"article","og_title":"How to add or write :hover on ::before and ::after selector in CSS","og_description":"how to add before and after selector on css with use hover effect","og_url":"https:\/\/myfreeonlinetools.com\/blog\/how-to-add-hover-on-before-and-after-css-selector\/","og_site_name":"MyFreeOnlineTools","article_author":"https:\/\/www.facebook.com\/LearnSchoolOnline\/","article_published_time":"2019-11-08T13:00:16+00:00","article_modified_time":"2019-11-08T13:09:38+00:00","og_image":[{"width":699,"height":354,"url":"http:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/3.jpg","type":"image\/jpeg"}],"author":"myfreeonlinetools","twitter_card":"summary_large_image","twitter_misc":{"Written by":"myfreeonlinetools"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/myfreeonlinetools.com\/blog\/how-to-add-hover-on-before-and-after-css-selector\/#article","isPartOf":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/how-to-add-hover-on-before-and-after-css-selector\/"},"author":{"name":"myfreeonlinetools","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c"},"headline":"How to add or write :hover on ::before and ::after selector in CSS","datePublished":"2019-11-08T13:00:16+00:00","dateModified":"2019-11-08T13:09:38+00:00","mainEntityOfPage":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/how-to-add-hover-on-before-and-after-css-selector\/"},"wordCount":95,"commentCount":0,"publisher":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#organization"},"image":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/how-to-add-hover-on-before-and-after-css-selector\/#primaryimage"},"thumbnailUrl":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/3.jpg","articleSection":["CSS Tutorial"],"inLanguage":"en","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/myfreeonlinetools.com\/blog\/how-to-add-hover-on-before-and-after-css-selector\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/myfreeonlinetools.com\/blog\/how-to-add-hover-on-before-and-after-css-selector\/","url":"https:\/\/myfreeonlinetools.com\/blog\/how-to-add-hover-on-before-and-after-css-selector\/","name":"How to add or write :hover on ::before and ::after selector in CSS","isPartOf":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/how-to-add-hover-on-before-and-after-css-selector\/#primaryimage"},"image":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/how-to-add-hover-on-before-and-after-css-selector\/#primaryimage"},"thumbnailUrl":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/3.jpg","datePublished":"2019-11-08T13:00:16+00:00","dateModified":"2019-11-08T13:09:38+00:00","description":"how to add before and after selector on css with use hover effect","breadcrumb":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/how-to-add-hover-on-before-and-after-css-selector\/#breadcrumb"},"inLanguage":"en","potentialAction":[{"@type":"ReadAction","target":["https:\/\/myfreeonlinetools.com\/blog\/how-to-add-hover-on-before-and-after-css-selector\/"]}]},{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/myfreeonlinetools.com\/blog\/how-to-add-hover-on-before-and-after-css-selector\/#primaryimage","url":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/3.jpg","contentUrl":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/3.jpg","width":699,"height":354},{"@type":"BreadcrumbList","@id":"https:\/\/myfreeonlinetools.com\/blog\/how-to-add-hover-on-before-and-after-css-selector\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/myfreeonlinetools.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to add or write :hover on ::before and ::after selector in CSS"}]},{"@type":"WebSite","@id":"https:\/\/myfreeonlinetools.com\/blog\/#website","url":"https:\/\/myfreeonlinetools.com\/blog\/","name":"MyFreeOnlineTools","description":"","publisher":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/myfreeonlinetools.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en"},{"@type":"Organization","@id":"https:\/\/myfreeonlinetools.com\/blog\/#organization","name":"MyFreeOnlineTools","url":"https:\/\/myfreeonlinetools.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png","contentUrl":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png","width":387,"height":79,"caption":"MyFreeOnlineTools"},"image":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c","name":"myfreeonlinetools","image":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g","caption":"myfreeonlinetools"},"description":"Live in Delhi, Working in Gurgaon as Web Designer and Graphic Designer. Developed and Design myfreeonlinetools for online free tools. Also having youtube channel Name with LearnSchoolOnline. Traveling, watching movies, coding are the hobbies.","sameAs":["https:\/\/myfreeonlinetools.com\/","https:\/\/www.facebook.com\/LearnSchoolOnline\/","https:\/\/www.youtube.com\/learnschoolonline"]}]}},"_links":{"self":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/posts\/449","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/comments?post=449"}],"version-history":[{"count":0,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/posts\/449\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/media\/452"}],"wp:attachment":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/media?parent=449"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/categories?post=449"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/tags?post=449"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}