{"id":2371,"date":"2016-09-14T12:57:56","date_gmt":"2016-09-14T12:57:56","guid":{"rendered":"https:\/\/www.codebee.co.th\/labs\/?p=2371"},"modified":"2016-10-24T06:18:17","modified_gmt":"2016-10-24T06:18:17","slug":"%e0%b8%aa%e0%b8%ad%e0%b8%99-css-%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b9%83%e0%b8%8a%e0%b9%89%e0%b8%87%e0%b8%b2%e0%b8%99-before","status":"publish","type":"post","link":"https:\/\/www.codebee.co.th\/labs\/%e0%b8%aa%e0%b8%ad%e0%b8%99-css-%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b9%83%e0%b8%8a%e0%b9%89%e0%b8%87%e0%b8%b2%e0%b8%99-before\/","title":{"rendered":"\u0e17\u0e33\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c \u0e2a\u0e2d\u0e19 CSS \u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 before, after \u0e41\u0e25\u0e30 content"},"content":{"rendered":"

\u0e17\u0e33\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c \u0e2a\u0e2d\u0e19 CSS \u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 before, after \u0e41\u0e25\u0e30 content<\/h3>\n

<\/br>
\n\u0e17\u0e33\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c \u0e2a\u0e2d\u0e19 CSS<\/strong>
\n\u0e04\u0e07\u0e08\u0e30\u0e40\u0e04\u0e22\u0e1c\u0e48\u0e32\u0e19\u0e15\u0e32\u0e21\u0e32\u0e01\u0e31\u0e19\u0e1a\u0e49\u0e32\u0e07\u0e41\u0e25\u0e49\u0e27\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e19\u0e31\u0e01\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a before, after \u0e41\u0e25\u0e30 content \u0e40\u0e1e\u0e23\u0e32\u0e30\u0e40\u0e1b\u0e47\u0e19\u0e2b\u0e19\u0e36\u0e48\u0e07\u0e43\u0e19\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e02\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e40\u0e02\u0e35\u0e22\u0e19 CSS \u0e40\u0e23\u0e32\u0e40\u0e23\u0e35\u0e22\u0e01 syntax \u0e40\u0e2b\u0e25\u0e48\u0e32\u0e19\u0e35\u0e49\u0e27\u0e48\u0e32 Pseudo Element \u0e2b\u0e23\u0e37\u0e2d\u0e2d\u0e07\u0e04\u0e4c\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e41\u0e1d\u0e07\u0e17\u0e35\u0e48\u0e08\u0e30\u0e16\u0e39\u0e01\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e02\u0e49\u0e32\u0e44\u0e1b\u0e43\u0e19 html \u0e19\u0e31\u0e48\u0e19\u0e40\u0e2d\u0e07\u0e04\u0e23\u0e31\u0e1a Pseudo Element \u0e44\u0e21\u0e48\u0e44\u0e14\u0e49\u0e21\u0e35\u0e40\u0e1e\u0e35\u0e22\u0e07\u0e41\u0e04\u0e48 before \u0e41\u0e25\u0e30 after \u0e41\u0e15\u0e48\u0e22\u0e31\u0e07\u0e21\u0e35\u0e2d\u0e35\u0e01\u0e2b\u0e25\u0e32\u0e22 \u0e46 \u0e04\u0e33\u0e2a\u0e31\u0e48\u0e07\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e40\u0e0a\u0e48\u0e19 <\/p>\n

active, visited \u0e40\u0e1b\u0e47\u0e19\u0e15\u0e49\u0e19 \u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e14\u0e39\u0e04\u0e33\u0e2a\u0e31\u0e48\u0e07\u0e02\u0e2d\u0e07 Pseudo Element \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21\u0e44\u0e14\u0e49\u0e17\u0e35\u0e48\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c http:\/\/www.w3schools.com\/css\/css_pseudo_elements.asp<\/a>
\n<\/br><\/p>\n

\u0e2d\u0e18\u0e34\u0e1a\u0e32\u0e22 before<\/h4>\n

before \u0e08\u0e30\u0e40\u0e1b\u0e47\u0e19\u0e04\u0e33\u0e2a\u0e31\u0e48\u0e07\u0e44\u0e27\u0e49\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e17\u0e35\u0e48\u0e2d\u0e22\u0e39\u0e48\u0e14\u0e49\u0e32\u0e19\u0e2b\u0e19\u0e49\u0e32 \u0e40\u0e21\u0e37\u0e48\u0e2d\u0e21\u0e35\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e01\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 element \u0e1c\u0e48\u0e32\u0e19 id \u0e2b\u0e23\u0e37\u0e2d class \u0e19\u0e31\u0e49\u0e19 \u0e46 \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e43\u0e19 content \u0e08\u0e30\u0e16\u0e39\u0e01\u0e19\u0e33\u0e44\u0e1b\u0e41\u0e2a\u0e14\u0e07\u0e43\u0e19\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e2a\u0e38\u0e14 \u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e40\u0e0a\u0e48\u0e19 \u0e40\u0e21\u0e37\u0e48\u0e2d\u0e40\u0e23\u0e32\u0e40\u0e23\u0e35\u0e22\u0e01\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 p element \u0e41\u0e25\u0e30\u0e01\u0e33\u0e2b\u0e19\u0e14 content \u0e43\u0e2b\u0e49\u0e40\u0e17\u0e48\u0e32\u0e01\u0e31\u0e1a “Good”<\/p>\n

\r\np:before{\r\n  content:\"Good\";\r\n}<\/pre>\n
<\/br><\/p>\n
\u0e2d\u0e18\u0e34\u0e1a\u0e32\u0e22 after<\/h4>\n
after \u0e08\u0e30\u0e40\u0e1b\u0e47\u0e19\u0e04\u0e33\u0e2a\u0e31\u0e48\u0e07\u0e44\u0e27\u0e49\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e17\u0e35\u0e48\u0e2d\u0e22\u0e39\u0e48\u0e15\u0e48\u0e2d\u0e08\u0e32\u0e01 before \u0e40\u0e21\u0e37\u0e48\u0e2d\u0e21\u0e35\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e01\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 element \u0e1c\u0e48\u0e32\u0e19 id \u0e2b\u0e23\u0e37\u0e2d class \u0e19\u0e31\u0e49\u0e19 \u0e46 \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e43\u0e19 content \u0e08\u0e30\u0e16\u0e39\u0e01\u0e19\u0e33\u0e44\u0e1b\u0e41\u0e2a\u0e14\u0e07\u0e15\u0e48\u0e2d\u0e08\u0e32\u0e01 content \u0e02\u0e2d\u0e07 before \u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e40\u0e0a\u0e48\u0e19<\/p>\n
\r\np:after{\r\n  content:\"Morning\";\r\n}<\/pre>\n
<\/br>
\n\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a content \u0e08\u0e30\u0e40\u0e1b\u0e47\u0e19\u0e15\u0e31\u0e27\u0e40\u0e01\u0e47\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e17\u0e35\u0e48\u0e08\u0e30\u0e19\u0e33\u0e44\u0e1b\u0e41\u0e2a\u0e14\u0e07\u0e43\u0e19\u0e2b\u0e19\u0e49\u0e32 html \u0e02\u0e2d\u0e07\u0e17\u0e31\u0e49\u0e07 before \u0e41\u0e25\u0e30 after \u0e08\u0e32\u0e01\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e14\u0e49\u0e32\u0e19\u0e1a\u0e19 \u0e16\u0e49\u0e32\u0e23\u0e2d\u0e07\u0e23\u0e27\u0e21\u0e42\u0e04\u0e4a\u0e14\u0e40\u0e1b\u0e47\u0e19 html \u0e41\u0e25\u0e30 css \u0e08\u0e30\u0e44\u0e14\u0e49\u0e1c\u0e25\u0e25\u0e31\u0e1e\u0e18\u0e4c\u0e14\u0e31\u0e07\u0e19\u0e35\u0e49\u0e04\u0e23\u0e31\u0e1a<\/p>\n
html<\/strong><\/p>\n
<html>\r\n<body>\r\n  <p><\/p>\r\n<\/body>\r\n<html><\/pre>\n
<\/br><\/p>\n
CSS<\/strong><\/p>\n
p:before {\r\n\tcontent: \"Good\";\r\n}\r\np:after {\r\n    content: \" Morning\";\r\n}<\/pre>\n
<\/br>
\n\u0e1c\u0e25\u0e25\u0e31\u0e1e\u0e18\u0e4c\u0e43\u0e19\u0e2b\u0e19\u0e49\u0e32 Output<\/strong><\/p>\n
Good Morning<\/pre>\n
\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 CSS Pseudo Element \u0e2d\u0e22\u0e48\u0e32\u0e07 before, after \u0e41\u0e25\u0e30 content \u0e40\u0e23\u0e32\u0e21\u0e31\u0e01\u0e08\u0e30\u0e40\u0e2b\u0e47\u0e19\u0e27\u0e48\u0e32\u0e16\u0e39\u0e01\u0e19\u0e33\u0e44\u0e1b\u0e43\u0e0a\u0e49\u0e01\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e01\u0e31\u0e1a SVG icon \u0e2d\u0e22\u0e48\u0e32\u0e07\u0e17\u0e35\u0e48\u0e40\u0e23\u0e32\u0e40\u0e2b\u0e47\u0e19\u0e43\u0e19 Bootstrap Framework \u0e40\u0e1b\u0e47\u0e19\u0e15\u0e49\u0e19<\/p>\n","protected":false},"excerpt":{"rendered":"
\u0e17\u0e33\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c \u0e2a\u0e2d\u0e19 CSS \u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 before, after \u0e41\u0e25\u0e30 content \u0e17\u0e33\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c \u0e2a\u0e2d\u0e19 CSS \u0e04\u0e07\u0e08\u0e30\u0e40\u0e04\u0e22\u0e1c\u0e48\u0e32\u0e19\u0e15\u0e32\u0e21\u0e32\u0e01\u0e31\u0e19\u0e1a\u0e49\u0e32\u0e07\u0e41\u0e25\u0e49\u0e27\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e19\u0e31\u0e01\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a before, after \u0e41\u0e25\u0e30 content \u0e40\u0e1e\u0e23\u0e32\u0e30\u0e40\u0e1b\u0e47\u0e19\u0e2b\u0e19\u0e36\u0e48\u0e07\u0e43\u0e19\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e02\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e40\u0e02\u0e35\u0e22\u0e19 CSS \u0e40\u0e23\u0e32\u0e40\u0e23\u0e35\u0e22\u0e01 syntax…<\/p>\n","protected":false},"author":1,"featured_media":2383,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"video","meta":{"footnotes":""},"categories":[46],"tags":[795,796,797,794,933,371,614,549,501,793],"class_list":["post-2371","post","type-post","status-publish","format-video","has-post-thumbnail","hentry","category-website-development-","tag-css-before-after","tag-css-content","tag-css-pseudo-element","tag-css--before","tag-933","tag-371","tag-614","tag-549","tag-501","tag--css","post_format-post-format-video"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/posts\/2371","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/comments?post=2371"}],"version-history":[{"count":12,"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/posts\/2371\/revisions"}],"predecessor-version":[{"id":2736,"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/posts\/2371\/revisions\/2736"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/media\/2383"}],"wp:attachment":[{"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/media?parent=2371"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/categories?post=2371"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/tags?post=2371"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}