{"id":14256,"date":"2012-07-11T21:03:38","date_gmt":"2012-07-11T13:03:38","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=14256"},"modified":"2025-04-24T17:08:38","modified_gmt":"2025-04-24T09:08:38","slug":"pseudo-element-before-after","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/pseudo-element-before-after\/","title":{"rendered":"Understanding Pseudo-Element :before and :after"},"content":{"rendered":"

Cascading Style Sheet (CSS<\/a>) is primarily intended for applying styles to the HTML<\/a> markup, however in some cases when adding extra markup to the document is redundant or not possible, there is actually a feature in CSS that allows us to add extra markup without disrupting the actual document, namely the pseudo-elements<\/em><\/a>.<\/p>\n

You have heard of this term, especially when you have been following some of our tutorials<\/a>.<\/p>\n

There are actually a few CSS family members that are classified as pseudo-elements<\/code> such as the :first-line<\/code>, :first-letter<\/code>, ::selection<\/code>, :before<\/code> and :after<\/code>. But, for this article, we will limit our coverage to only the :before<\/code> and :after<\/code>; pseudo-elements<\/em> here will specifically refer to both of them. We will look into this particular subject starting with the basics.<\/p>\n

The Syntax and Browser Support<\/h2>\n

The pseudo-elements<\/em> have actually been around since CSS1<\/strong><\/a>, but the :before<\/code> and :after<\/code> that we are discussing here were released in CSS2.1<\/strong>. At the beginning, the pseudo-elements<\/em> used single-colon for the syntax, then as the web evolved, in CSS3 the pseudo-elements<\/em> were revised to use double-colon \u2013 becoming ::before<\/code> & ::after<\/code> \u2013 to distinguish them from pseudo-classes<\/em> (i.e. :hover<\/code>, :active<\/code>, and so on).<\/p>\n

\"syntax\"<\/figure>\n

However, whether you use the single-colon or the double-colon format, the browsers will still recognize either. And since Internet Explorer 8 only supports the single-colon format, it is safer to use the single-colon if you want wider browser compatibility<\/a>.<\/p>\n

What does it do?<\/h3>\n

In short, the pseudo-elements<\/em> will insert an extra element before<\/strong> or after<\/strong> the content\u2019s element, so when we add them both, they are technically equivalent to the following markup.<\/p>\n

\n<p>\n  <span>:before<\/span>\n  This the main content.\n  <span>:after<\/span>\n<\/p>\n<\/pre>\n
But those elements are not actually generated on the document. They are still visible on the surface, but you will not find them on the document source, so practically speaking they are fake<\/strong> elements.<\/p>\n
Using pseudo-elements<\/h2>\n
Using pseudo-elements<\/em> is relatively easy; the following syntax selector:before<\/code> will add an element before<\/strong> the content\u2019s selector while this syntax selector:after<\/code> will add an element after it, and to add a content inside them we can use the content<\/code> property<\/a>.<\/p>\n
For example, the snippet below will add a quotation mark before and after the blockquote<\/code>.<\/p>\n
\"quotation<\/figure>\n
\nblockquote:before {\n  content: open-quote;\n}\nblockquote:after {\n  content: close-quote;\n}\n<\/pre>\n
Styling pseudo-elements<\/h3>\n
Despite being fake elements, the pseudo-elements<\/em> actually act like \u201creal\u201d elements; we are able to add any style declarations to them, such as changing the color, adding background, adjusting the font size, aligning the text inside it and so forth.<\/p>\n
\"image<\/figure>\n
\nblockquote:before {\n  content: open-quote;\n  font-size: 24pt;\n  text-align: center;\n  line-height: 42px;\n  color: #fff;\n  background: #ddd;\n  float: left;\n  position: relative;\n  top: 30px;\n}\nblockquote:after {\n  content: close-quote;\n  font-size: 24pt;\n  text-align: center;\n  line-height: 42px;\n  color: #fff;\n  background: #ddd;\n  float: right;\n  position: relative;\n  bottom: 40px;\n}\n<\/pre>\n
Specifying the dimension<\/h3>\n
The generated elements are by default inline-level element<\/a>, so when we are about to specify the height and the width, we have to first define them as block elements using the display: block<\/code> declaration.<\/p>\n
\"image<\/figure>\n
\nblockquote:before {\n  content: open-quote;\n  font-size: 24pt;\n  text-align: center;\n  line-height: 42px;\n  color: #fff;\n  background: #ddd;\n  float: left;\n  position: relative;\n  top: 30px;\n  border-radius: 25px;\n\n  \/* define it as a block element *\/\n  display: block;\n  height: 25px;\n  width: 25px;\n}\nblockquote:after {\n  content: close-quote;\n  font-size: 24pt;\n  text-align: center;\n  line-height: 42px;\n  color: #fff;\n  background: #ddd;\n  float: right;\n  position: relative;\n  bottom: 40px;\n  border-radius: 25px;\n\n  \/* define it as a block element *\/\n  display: block;\n  height: 25px;\n  width: 25px;\n}\n<\/pre>\n
Attach background image<\/h3>\n
We can also replace the content with an image rather than only plain text. Although the content<\/code> property provides a url()<\/code> string to insert an image, in most cases I much prefer using the background<\/code> property for more control over the image attached.<\/p>\n
\"image<\/figure>\n
\nblockquote:before {\n  content: \" \";\n  font-size: 24pt;\n  text-align: center;\n  line-height: 42px;\n  color: #fff;\n  float: left;\n  position: relative;\n  top: 30px;\n  border-radius: 25px;\n\n  background: url(images\/quotationmark.png) -3px -3px #ddd;\n\n  display: block;\n  height: 25px;\n  width: 25px;\n}\nblockquote:after {\n  content: \" \";\n  font-size: 24pt;\n  text-align: center;\n  line-height: 42px;\n  color: #fff;\n  float: right;\n  position: relative;\n  bottom: 40px;\n  border-radius: 25px;\n\n  background: url(images\/quotationmark.png) -1px -32px #ddd;\n\n  display: block;\n  height: 25px;\n  width: 25px;\n}\n<\/pre>\n
However, as you can see from the snippet above, we are still declaring the content<\/code> property, this time with an empty string. The content<\/code> property is a requirement<\/strong> and should always be applied; otherwise the pseudo-element<\/em> will not work<\/strong> whatsoever.<\/p>\n
Combining with pseudo-classes<\/h3>\n
Although they are a different kind of pseudo<\/em>, we can use the pseudo-classes<\/em><\/a> along with pseudo-elements<\/em> together in one CSS rule, for instance, if we want to make the quotation mark background<\/strong> a bit darker when we hover over the blockquote<\/code>.<\/p>\n
\"image<\/figure>\n
\nblockquote:hover:after, blockquote:hover:before {\n  background-color: #555;\n}\n<\/pre>\n
Adding Transition Effect<\/h3>\n
And we can even apply the transition<\/code> property to them to create a graceful color transition effect.<\/p>\n
\ntransition: all 350ms;\n-o-transition: all 350ms;\n-moz-transition: all 350ms;\n-webkit-transition: all 350ms;\n<\/pre>\n
Unfortunately though, the transition effect seems to only work in the latest version of Firefox<\/a>. Hopefully more browsers<\/a> will catch up to allow the transition property to be applied to pseudo-elements<\/em> in the future.<\/p>\n
\n    Demo<\/a>\n    Download Source<\/a>\n<\/div>\n
Conclusion<\/h2>\n
Pseudo-elements<\/em> are simply cool<\/strong> and ultimately usable. Basically, we have two bonus elements<\/strong> for every element we add without interfering with the actual HTML structure at all, and then turning them into almost everything we can ever imagine<\/a>.<\/p>\n
There are actually some improvements for pseudo-elements<\/em><\/a> that are currently being worked on, such as nesting pseudo-elements<\/strong> div::before::before { content: ''; }<\/code> and multiple pseudo-elements<\/strong> div::before(3) { content: ''; }<\/code>, which obviously will open much more possibilities in web design practice in the future. While they are being implemented in current browsers, let\u2019s wait patiently for now.<\/p>","protected":false},"excerpt":{"rendered":"
Cascading Style Sheet (CSS) is primarily intended for applying styles to the HTML markup, however in some cases when adding extra markup to the document is redundant or not possible, there is actually a feature in CSS that allows us to add extra markup without disrupting the actual document, namely the pseudo-elements. You have heard…<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[507,2060],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nUnderstanding Pseudo-Element :before and :after - Hongkiat<\/title>\n<meta name=\"description\" content=\"Cascading Style Sheet (CSS) is primarily intended for applying styles to the HTML markup, however in some cases when adding extra markup to the document\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/pseudo-element-before-after\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Understanding Pseudo-Element :before and :after\" \/>\n<meta property=\"og:description\" content=\"Cascading Style Sheet (CSS) is primarily intended for applying styles to the HTML markup, however in some cases when adding extra markup to the document\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/pseudo-element-before-after\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2012-07-11T13:03:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-24T09:08:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/before-after-elements\/syntax.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/pseudo-element-before-after\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/pseudo-element-before-after\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Understanding Pseudo-Element :before and :after\",\"datePublished\":\"2012-07-11T13:03:38+00:00\",\"dateModified\":\"2025-04-24T09:08:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/pseudo-element-before-after\\\/\"},\"wordCount\":687,\"commentCount\":60,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/pseudo-element-before-after\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/before-after-elements\\\/syntax.jpg\",\"keywords\":[\"CSS\",\"pseudo element\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/pseudo-element-before-after\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/pseudo-element-before-after\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/pseudo-element-before-after\\\/\",\"name\":\"Understanding Pseudo-Element :before and :after - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/pseudo-element-before-after\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/pseudo-element-before-after\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/before-after-elements\\\/syntax.jpg\",\"datePublished\":\"2012-07-11T13:03:38+00:00\",\"dateModified\":\"2025-04-24T09:08:38+00:00\",\"description\":\"Cascading Style Sheet (CSS) is primarily intended for applying styles to the HTML markup, however in some cases when adding extra markup to the document\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/pseudo-element-before-after\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/pseudo-element-before-after\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/pseudo-element-before-after\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/before-after-elements\\\/syntax.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/before-after-elements\\\/syntax.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/pseudo-element-before-after\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Understanding Pseudo-Element :before and :after\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Understanding Pseudo-Element :before and :after - Hongkiat","description":"Cascading Style Sheet (CSS) is primarily intended for applying styles to the HTML markup, however in some cases when adding extra markup to the document","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:\/\/www.hongkiat.com\/blog\/pseudo-element-before-after\/","og_locale":"en_US","og_type":"article","og_title":"Understanding Pseudo-Element :before and :after","og_description":"Cascading Style Sheet (CSS) is primarily intended for applying styles to the HTML markup, however in some cases when adding extra markup to the document","og_url":"https:\/\/www.hongkiat.com\/blog\/pseudo-element-before-after\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2012-07-11T13:03:38+00:00","article_modified_time":"2025-04-24T09:08:38+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/before-after-elements\/syntax.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/pseudo-element-before-after\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/pseudo-element-before-after\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Understanding Pseudo-Element :before and :after","datePublished":"2012-07-11T13:03:38+00:00","dateModified":"2025-04-24T09:08:38+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/pseudo-element-before-after\/"},"wordCount":687,"commentCount":60,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/pseudo-element-before-after\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/before-after-elements\/syntax.jpg","keywords":["CSS","pseudo element"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/pseudo-element-before-after\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/pseudo-element-before-after\/","url":"https:\/\/www.hongkiat.com\/blog\/pseudo-element-before-after\/","name":"Understanding Pseudo-Element :before and :after - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/pseudo-element-before-after\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/pseudo-element-before-after\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/before-after-elements\/syntax.jpg","datePublished":"2012-07-11T13:03:38+00:00","dateModified":"2025-04-24T09:08:38+00:00","description":"Cascading Style Sheet (CSS) is primarily intended for applying styles to the HTML markup, however in some cases when adding extra markup to the document","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/pseudo-element-before-after\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/pseudo-element-before-after\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/pseudo-element-before-after\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/before-after-elements\/syntax.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/before-after-elements\/syntax.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/pseudo-element-before-after\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Understanding Pseudo-Element :before and :after"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-3HW","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/14256","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=14256"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/14256\/revisions"}],"predecessor-version":[{"id":74100,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/14256\/revisions\/74100"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=14256"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=14256"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=14256"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=14256"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}