{"id":1160,"date":"2021-01-07T22:27:08","date_gmt":"2021-01-07T16:57:08","guid":{"rendered":"https:\/\/myfreeonlinetools.com\/blog\/?p=1160"},"modified":"2021-01-07T22:27:46","modified_gmt":"2021-01-07T16:57:46","slug":"change-before-after-pseudo-element-content-using-in-div-by-jquery","status":"publish","type":"post","link":"https:\/\/myfreeonlinetools.com\/blog\/change-before-after-pseudo-element-content-using-in-div-by-jquery\/","title":{"rendered":"Change ::before ::after Pseudo Element content using in div by jQuery"},"content":{"rendered":"<h2>How to manipulate and change the content of selected DIV by jQuery.<\/h2>\n<p>&nbsp;<\/p>\n<p>Manipulating and change the content of DIV, SPAN by used CSS pseudo-element ::before and ::after.<\/p>\n<p>Passed content to pseudo element with data attributes and use jQuery to change and manipulate.<\/p>\n<p>&nbsp;<\/p>\n<p>HTML Code<\/p>\n<pre>&lt;body&gt;\r\n\r\n&lt;div id=\"uploadFile\"&gt;\r\n&lt;div class=\"uplidFileContent\" data-before=\"Pseudo Before Content Click to change\" &gt;\r\nChange Before After Pseudo Element\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;\/body&gt;<\/pre>\n<p>&nbsp;<\/p>\n<p>CSS Code<\/p>\n<pre> &lt;style type=\"text\/css\"&gt;\r\n.uplidFileContent{ height: 300px; width: 300px; position: relative; top: 50%; left: 50%; background-color: #ccc; transform: translate(-50%, 50%); color: #000; display: flex; justify-content: center; align-items: center; font-size: 24px; text-align: center; }\r\n.uplidFileContent::before{ position: absolute; top: -20px; left: -20px; content: attr(data-before);; height: 85px; width: 200px; background-color: rgba(11,11,11,0.5); padding: 15px; border-radius: 10px; color: #FFF; }\r\n&lt;\/style&gt;<\/pre>\n<p>JavaScript Code<\/p>\n<pre>&lt;script type=\"text\/javascript\" src=\"https:\/\/code.jquery.com\/jquery-3.5.1.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\"&gt;\r\n\r\njQuery(document).ready(function(){\r\njQuery('.uplidFileContent').attr('data-before','Your Pseudo content change');\r\n});\r\n\r\n&lt;\/script&gt;<\/pre>\n<p>Download Code<\/p>\n<p><a href=\"https:\/\/myfreeonlinetools.com\/source-code\/change-content-div-before-after-pseudo-element.zip\">https:\/\/myfreeonlinetools.com\/source-code\/change-content-div-before-after-pseudo-element.zip<\/a><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>How to manipulate and change the content of selected DIV by jQuery. &nbsp; Manipulating and change the content of DIV, SPAN by used CSS pseudo-element ::before and ::after. Passed content [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[28],"tags":[],"class_list":["post-1160","post","type-post","status-publish","format-standard","hentry","category-jquery-code"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Change ::before ::after Pseudo Element content using in div by jQuery - MyFreeOnlineTools<\/title>\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\/change-before-after-pseudo-element-content-using-in-div-by-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Change ::before ::after Pseudo Element content using in div by jQuery - MyFreeOnlineTools\" \/>\n<meta property=\"og:description\" content=\"How to manipulate and change the content of selected DIV by jQuery. &nbsp; Manipulating and change the content of DIV, SPAN by used CSS pseudo-element ::before and ::after. Passed content [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/myfreeonlinetools.com\/blog\/change-before-after-pseudo-element-content-using-in-div-by-jquery\/\" \/>\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=\"2021-01-07T16:57:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-01-07T16:57:46+00:00\" \/>\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\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/change-before-after-pseudo-element-content-using-in-div-by-jquery\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/change-before-after-pseudo-element-content-using-in-div-by-jquery\/\"},\"author\":{\"name\":\"myfreeonlinetools\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c\"},\"headline\":\"Change ::before ::after Pseudo Element content using in div by jQuery\",\"datePublished\":\"2021-01-07T16:57:08+00:00\",\"dateModified\":\"2021-01-07T16:57:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/change-before-after-pseudo-element-content-using-in-div-by-jquery\/\"},\"wordCount\":71,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#organization\"},\"articleSection\":[\"jQuery Code\"],\"inLanguage\":\"en\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/myfreeonlinetools.com\/blog\/change-before-after-pseudo-element-content-using-in-div-by-jquery\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/change-before-after-pseudo-element-content-using-in-div-by-jquery\/\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/change-before-after-pseudo-element-content-using-in-div-by-jquery\/\",\"name\":\"Change ::before ::after Pseudo Element content using in div by jQuery - MyFreeOnlineTools\",\"isPartOf\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#website\"},\"datePublished\":\"2021-01-07T16:57:08+00:00\",\"dateModified\":\"2021-01-07T16:57:46+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/change-before-after-pseudo-element-content-using-in-div-by-jquery\/#breadcrumb\"},\"inLanguage\":\"en\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/myfreeonlinetools.com\/blog\/change-before-after-pseudo-element-content-using-in-div-by-jquery\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/change-before-after-pseudo-element-content-using-in-div-by-jquery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/myfreeonlinetools.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Change ::before ::after Pseudo Element content using in div by jQuery\"}]},{\"@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":"Change ::before ::after Pseudo Element content using in div by jQuery - MyFreeOnlineTools","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\/change-before-after-pseudo-element-content-using-in-div-by-jquery\/","og_locale":"en_US","og_type":"article","og_title":"Change ::before ::after Pseudo Element content using in div by jQuery - MyFreeOnlineTools","og_description":"How to manipulate and change the content of selected DIV by jQuery. &nbsp; Manipulating and change the content of DIV, SPAN by used CSS pseudo-element ::before and ::after. Passed content [&hellip;]","og_url":"https:\/\/myfreeonlinetools.com\/blog\/change-before-after-pseudo-element-content-using-in-div-by-jquery\/","og_site_name":"MyFreeOnlineTools","article_author":"https:\/\/www.facebook.com\/LearnSchoolOnline\/","article_published_time":"2021-01-07T16:57:08+00:00","article_modified_time":"2021-01-07T16:57:46+00:00","author":"myfreeonlinetools","twitter_card":"summary_large_image","twitter_misc":{"Written by":"myfreeonlinetools","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/myfreeonlinetools.com\/blog\/change-before-after-pseudo-element-content-using-in-div-by-jquery\/#article","isPartOf":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/change-before-after-pseudo-element-content-using-in-div-by-jquery\/"},"author":{"name":"myfreeonlinetools","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c"},"headline":"Change ::before ::after Pseudo Element content using in div by jQuery","datePublished":"2021-01-07T16:57:08+00:00","dateModified":"2021-01-07T16:57:46+00:00","mainEntityOfPage":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/change-before-after-pseudo-element-content-using-in-div-by-jquery\/"},"wordCount":71,"commentCount":0,"publisher":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#organization"},"articleSection":["jQuery Code"],"inLanguage":"en","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/myfreeonlinetools.com\/blog\/change-before-after-pseudo-element-content-using-in-div-by-jquery\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/myfreeonlinetools.com\/blog\/change-before-after-pseudo-element-content-using-in-div-by-jquery\/","url":"https:\/\/myfreeonlinetools.com\/blog\/change-before-after-pseudo-element-content-using-in-div-by-jquery\/","name":"Change ::before ::after Pseudo Element content using in div by jQuery - MyFreeOnlineTools","isPartOf":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#website"},"datePublished":"2021-01-07T16:57:08+00:00","dateModified":"2021-01-07T16:57:46+00:00","breadcrumb":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/change-before-after-pseudo-element-content-using-in-div-by-jquery\/#breadcrumb"},"inLanguage":"en","potentialAction":[{"@type":"ReadAction","target":["https:\/\/myfreeonlinetools.com\/blog\/change-before-after-pseudo-element-content-using-in-div-by-jquery\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/myfreeonlinetools.com\/blog\/change-before-after-pseudo-element-content-using-in-div-by-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/myfreeonlinetools.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Change ::before ::after Pseudo Element content using in div by jQuery"}]},{"@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\/1160","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=1160"}],"version-history":[{"count":0,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/posts\/1160\/revisions"}],"wp:attachment":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/media?parent=1160"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/categories?post=1160"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/tags?post=1160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}