{"id":8006,"date":"2022-07-22T17:36:27","date_gmt":"2022-07-22T11:06:27","guid":{"rendered":"https:\/\/spiceworksmyanmar.com\/blog\/?p=8006"},"modified":"2022-08-11T14:17:23","modified_gmt":"2022-08-11T07:47:23","slug":"lets-understand-pseudo-element","status":"publish","type":"post","link":"https:\/\/www.spiceworksmyanmar.com\/blog\/lets-understand-pseudo-element\/","title":{"rendered":"Let&#8217;s understand pseudo-element"},"content":{"rendered":"<p>\u1019\u1002\u1064\u101c\u102c\u1015\u102b\u101b\u103d\u1004\u1039\u1037\u104b<br \/>\nSpiceworks Myanmar \u1019\u103d\u102c Web Designer \u1021\u103b\u1016\u1005\u1039 \u1010\u102c\u101d\u1014\u1039\u101a\u1030\u101c\u102f\u1015\u1039\u1000\u102d\u102f\u1004\u1039\u1031\u1014\u1010\u1032\u1094 \u1006\u102f\u101b\u100a\u1039\u1011\u103c\u1014\u1039\u1038\u1015\u102b\u104b<br \/>\n\u1012\u102e\u1010\u1005\u1039\u1031\u1001\u102b\u1000\u1039\u1031\u101b\u103c\u1038\u1001\u103a\u101a\u1039\u1011\u102c\u1038\u1010\u102c\u1000\u1031\u1010\u102c\u1037 CSS \u1019\u103d\u102c \u1021\u101e\u102f\u1036\u1038\u1019\u103a\u102c\u1038\u1010\u1032\u1037 &#8220;pseudo-element&#8221; \u1021\u1031\u107e\u1000\u102c\u1004\u1039\u1038 \u1031\u1006\u103c\u1038\u1031\u108f\u103c\u1038\u101e\u103c\u102c\u1038\u1001\u103a\u1004\u1039\u1015\u102b\u1010\u101a\u1039\u104b<br \/>\nPseudo-element \u101c\u102d\u102f\u1094\u1031\u103b\u1015\u102c\u101c\u102d\u102f\u1000\u1039\u101b\u1004\u1039 code \u1031\u101b\u1038\u101e\u1030\u1031\u1010\u103c\u1021\u1010\u103c\u1000\u1039 \u1015\u1011\u1019\u1006\u102f\u1036\u1038 \u101e\u1010\u102d\u101b\u1019\u102d\u1010\u102c\u1000 ::before or ::after \u103b\u1016\u1005\u1039\u1019\u101a\u1039\u101c\u102d\u102f\u1094\u1011\u1004\u1039\u1015\u102b\u1010\u101a\u1039\u104b \u1010\u1000\u101a\u1039\u101c\u100a\u1039\u1038 CSS code \u1019\u103d\u102c ::before or ::after \u1000\u1021\u101e\u102f\u1036\u1038\u1021\u1019\u103a\u102c\u1038\u1006\u102f\u1036\u1038 pseudo-element \u1006\u102d\u102f\u101c\u100a\u1039\u1038 \u1019\u1019\u103d\u102c\u1038\u1015\u102b\u1018\u1030\u1038\u104b<br \/>\n\u1021\u1001\u102f\u1000\u1031\u1010\u102c\u1037 \u1021\u101e\u102f\u1036\u1038\u101d\u1004\u1039\u1019\u101a\u1039\u1037 \u1010\u103b\u1001\u102c\u1038 pseudo-element \u1031\u1010\u103c\u1021\u1031\u107e\u1000\u102c\u1004\u1039\u1038\u101c\u100a\u1039\u1038 \u1011\u1015\u1039\u107f\u1015\u102e\u1038 \u1031\u101c\u1037\u101c\u102c\u107e\u1000\u100a\u1039\u1037\u107e\u1000\u101b\u1031\u1021\u102c\u1004\u1039\u1031\u1014\u102c\u1039\u104b<\/p>\n<h2>What is Pseudo-element?<\/h2>\n<p>Pseudo-element \u1006\u102d\u102f\u1010\u102c HTML \u1019\u103d\u102c\u101e\u1010\u1039\u1019\u103d\u1010\u1039\u1011\u102c\u1038\u1010\u1032\u1037 element \u101b\u1032\u1095\u1021\u1005\u102d\u1010\u1039\u1021\u1015\u102d\u102f\u1004\u1039\u1038\u1010\u1005\u1039\u1001\u102f\u1000\u102d\u102f style \u103b\u1015\u1033\u101c\u102f\u1015\u1039\u103b\u1001\u1004\u1039\u1038 \u103b\u1016\u1005\u1039\u1015\u102b\u1010\u101a\u1039\u104b<br \/>\nSelected element \u1000\u102d\u102f CSS \u101b\u1032\u1095 pseudo \u1015\u102f\u1036\u1005\u1036\u103b\u1016\u1004\u1039\u1037 style \u103b\u1015\u1033\u101c\u102f\u1015\u1039\u1010\u102c\u103b\u1016\u1005\u1039\u101c\u102d\u102f\u1094 HTML \u1000\u102d\u102f \u103b\u1015\u1004\u1039\u1006\u1004\u1039\u103b\u1001\u1004\u1039\u1038\u1019\u103b\u1015\u1033\u101c\u102f\u1015\u1039\u1018\u1032 \u1000\u102d\u102f\u101a\u1039\u101c\u102d\u102f\u1001\u103a\u1004\u1039\u1010\u1032\u1037\u1015\u102f\u1036\u1005\u1036\u1000\u102d\u102f style \u1011\u100a\u1039\u1037\u108f\u102d\u102f\u1004\u1039\u1019\u103d\u102c\u103b\u1016\u1005\u1039\u1015\u102b\u1010\u101a\u1039\u104b<br \/>\n<strong>pseudo-element<\/strong> \u101b\u103d\u102d\u101e\u101c\u102d\u102f <strong>pseudo-class <\/strong>\u101c\u100a\u1039\u1038\u101b\u103d\u102d\u1015\u102b\u1010\u101a\u1039\u104b \u1012\u102b\u1031\u1015\u1019\u101a\u1037\u1039 \u1031\u101b\u1038\u1015\u102f\u1036\u1031\u101b\u1038\u1014\u100a\u1039\u1038 \u1000\u103c\u1032\u1019\u103d\u102c\u103b\u1016\u1005\u1039\u1015\u102b\u1010\u101a\u1039\u104b<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8014\" src=\"https:\/\/spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2022\/07\/pseudo-element01.png\" alt=\"\" width=\"1103\" height=\"165\" srcset=\"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2022\/07\/pseudo-element01.png 1103w, https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2022\/07\/pseudo-element01-300x45.png 300w, https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2022\/07\/pseudo-element01-768x115.png 768w, https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2022\/07\/pseudo-element01-1024x153.png 1024w\" sizes=\"auto, (max-width: 1103px) 100vw, 1103px\" \/><\/p>\n<h2>How to use <strong>pseudo-elements<\/strong><\/h2>\n<p>\u1021\u1031\u103b\u1001\u1001\u1036\u1021\u102c\u1038\u103b\u1016\u1004\u1039\u1037 selector \u1010\u1005\u1039\u1001\u102f (ID, tag name, class name, etc.) :: pseudo-element name \u103b\u1016\u1004\u1039\u1037 \u1031\u101b\u1038\u101e\u102c\u1038\u1015\u102b\u1010\u101a\u1039\u104b<br \/>\n<em>syntax of pseudo-elements:<\/em><\/p>\n<pre class=\"brush: css; notranslate\" title=\"\">selector::pseudo-element {\r\n  \/\/  property: value;\r\n}<\/pre>\n<p><strong>SCSS<\/strong> \u1019\u103d\u102c\u1006\u102d\u102f\u101b\u1004\u1039\u1031\u1010\u102c\u1037 \u1031\u1021\u102c\u1000\u1039\u1015\u102b\u1021\u1010\u102d\u102f\u1004\u1039\u1038 \u1031\u101b\u1038\u108f\u102d\u102f\u1004\u1039\u1015\u102b\u1010\u101a\u1039\u104b<\/p>\n<pre class=\"brush: css; notranslate\" title=\"\">selector{\r\n\u3000 &amp;::after{\r\n     \/\/ property: value;\r\n   }\r\n }<\/pre>\n<p><em>(Notes)<\/em> ::before or ::after \u101e\u1010\u1039\u1019\u103d\u1010\u1039\u1019\u101a\u1039\u1006\u102d\u102f\u101b\u1004\u1039 <strong>content<\/strong> \u1021\u107f\u1019\u1032\u1010\u1019\u1039\u1038 \u101e\u1010\u1039\u1019\u103d\u1010\u1039\u1031\u1015\u1038\u101b\u1015\u102b\u1019\u101a\u1039\u104b<br \/>\n\u1005\u102c\u101e\u102c\u1038 \u101e\u102d\u102f\u1094\u1019\u101f\u102f\u1010\u1039 symbols \u1019\u103a\u102c\u1038\u1000\u102d\u102f pseudo-elements \u1021\u103b\u1016\u1005\u1039\u1011\u100a\u1037\u1039\u101e\u103c\u1004\u1039\u1038\u101c\u102d\u102f\u1015\u102b\u1000 \u104e\u1010\u102d\u102f\u1094\u1000\u102d\u102f <strong>content<\/strong> \u1010\u103c\u1004\u1039\u101e\u1010\u1039\u1019\u103d\u1010\u1039\u1031\u1015\u1038\u101b\u1015\u102b\u1019\u101a\u1039\u104b<br \/>\nElements or images \u1019\u103a\u102c\u1038\u1000\u102d\u102f \u1011\u100a\u1037\u1039\u101e\u103c\u1004\u1039\u1038\u101c\u102d\u102f\u1015\u102b\u1000 <strong>content<\/strong> ( content: &#8220;&#8221;; ) \u1021\u101c\u103c\u1010\u1039\u1011\u102c\u1038\u101c\u102d\u102f\u1000\u1039\u1015\u102b\u104b<br \/>\n\u1011\u102d\u102f\u1094\u1031\u1014\u102c\u1000\u1039 pseudo-element \u1021\u1010\u103c\u1000\u1039 position: absolute; element \u1021\u1010\u103c\u1000\u1039 position: relative; \u1011\u102c\u1038\u1015\u102b\u104b<\/p>\n<pre class=\"brush: css; notranslate\" title=\"\">\r\n\/\/ HTML\r\n<div class=\"content-after\"><\/div>\r\n\r\n\/\/ CSS \r\n.content-after { \r\nposition: relative; \r\n} \r\n.content-after::after { \r\nposition: absolute; content: \"\"; \r\n}\r\n<\/pre>\n<p>&nbsp;<\/p>\n<h2>Types of pseudo-elements<\/h2>\n<p>Pseudo-elements \u1019\u103a\u102c\u1038\u1000\u102d\u102f\u1031\u1010\u103c\u1038\u1031\u101e\u102c\u1021\u1001\u102b ::before \u108f\u103d\u1004\u1037\u1039 ::after \u1000\u102d\u102f\u1005\u1025\u1039\u1038\u1005\u102c\u1038\u1019\u102d\u107e\u1000\u1015\u102b\u1010\u101a\u1039\u104b \u101e\u102d\u102f\u1094\u1031\u101e\u102c\u1039 \u1021\u1019\u103d\u1014\u1039\u1010\u1000\u101a\u1039\u1010\u103c\u1004\u1039 pseudo-elements \u1021\u1019\u103a\u102d\u1033\u1038\u1021\u1005\u102c\u1038 \u1021\u1019\u103a\u102d\u1033\u1038\u1019\u103a\u102d\u1033\u1038\u101b\u103d\u102d\u1015\u102b\u1010\u101a\u1039\u104b<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8023\" src=\"https:\/\/spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2022\/07\/CSS-Pseudo-elements-1.png\" alt=\"\" width=\"1281\" height=\"355\" srcset=\"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2022\/07\/CSS-Pseudo-elements-1.png 1281w, https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2022\/07\/CSS-Pseudo-elements-1-300x83.png 300w, https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2022\/07\/CSS-Pseudo-elements-1-768x213.png 768w, https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2022\/07\/CSS-Pseudo-elements-1-1024x284.png 1024w, https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2022\/07\/CSS-Pseudo-elements-1-1280x355.png 1280w\" sizes=\"auto, (max-width: 1281px) 100vw, 1281px\" \/><br \/>\nReference:<a href=\"https:\/\/www.w3schools.com\/css\/css_pseudo_elements.asp\" target=\"_blank\" rel=\"noopener noreferrer\">All CSS Pseudo Elements<\/a><\/p>\n<p>Pseudo-element \u1021\u1019\u103a\u102d\u1033\u1038\u1021\u1005\u102c\u1038 \u1021\u1019\u103a\u102c\u1038\u1080\u1000\u102e\u1038\u101b\u103d\u102d\u1010\u1032\u1037\u1011\u1032\u1000 \u101c\u1000\u1039\u1031\u1010\u103c\u1095\u1019\u103d\u102c\u1021\u101e\u102f\u1036\u1038\u1019\u103a\u102c\u1038\u1010\u1032\u1037 type \u1031\u1010\u103c\u1000\u102d\u102f \u1031\u103b\u1015\u102c\u103b\u1015\u1031\u1015\u1038\u101e\u103c\u102c\u1038\u1015\u102b\u1019\u101a\u1039\u104b<\/p>\n<h3>::after\uff08::before\uff09<\/h3>\n<p>Select \u101c\u102f\u1015\u1039\u101c\u102d\u102f\u1000\u1039\u1010\u1032\u1037 element \u101b\u1032\u1095 last child element \u1021\u1010\u103c\u1000\u1039 pseudo-element \u1006\u102d\u102f\u101b\u1004\u1039 ::after \u1000\u102d\u102f\u1021\u101e\u102f\u1036\u1038\u103b\u1015\u1033\u107f\u1015\u102e\u1038 first child \u1021\u1010\u103c\u1000\u1039 ::before \u1000\u102d\u102f \u1021\u101e\u102f\u1036\u1038\u103b\u1015\u1033\u1031\u101b\u1038\u101e\u102c\u1038\u108f\u102d\u102f\u1004\u1039\u1015\u102b\u1010\u101a\u1039\u104b<br \/>\n\u1031\u1021\u102c\u1000\u1039\u1015\u102b code \u1019\u103d\u102c\u1014\u1019\u1030\u1014\u102c\u1031\u101c\u1037\u101c\u102c\u108f\u102d\u102f\u1004\u1039\u1015\u102b\u1010\u101a\u1039\u104b<\/p>\n<pre class=\"brush: css; notranslate\" title=\"\">\r\n\/\/ HTML\r\n<div class=\"content-after\"><\/div>\r\n\r\n\/\/ CSS\r\n\r\n.content-after {\r\n  position: relative;\r\n  width: 50px;\r\n  height: 100px;\r\n  background-color: #ff6767;\r\n}\r\n.content-after::after {\r\n  position: absolute;\r\n  content: \"\";\r\n  width: 30px;\r\n  height: 30px;\r\n  background-color: #000;\r\n  top: 0;\r\n  bottom: 0;\r\n  right: 0;\r\n  left: 0;\r\n  margin: auto;\r\n  border-radius: 50%;\r\n}\r\n\r\n<\/pre>\n<p>\u1021\u1011\u1000\u1039\u1015\u102b pseudo-element \u1031\u1016\u102c\u1039\u103b\u1015\u1001\u103a\u1000\u1039 \u1031\u1021\u102c\u1004\u1039\u103b\u1019\u1004\u1039\u1015\u102b\u1000 validation tool \u101e\u100a\u1039 \u1031\u1021\u102c\u1000\u1039\u1015\u102b\u1015\u102f\u1036\u1021\u1010\u102d\u102f\u1004\u1039\u1038 output \u1011\u102f\u1010\u1039\u1031\u1015\u1038\u1019\u103d\u102c\u103b\u1016\u1005\u1039\u1015\u102b\u1010\u101a\u1039\u104b<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8081\" src=\"https:\/\/spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2022\/07\/img_example01_03.jpg\" alt=\"\" width=\"63\" height=\"126\" \/><\/p>\n<h3>::first-letter<\/h3>\n<p>\u101e\u1010\u1039\u1019\u103d\u1010\u1039\u1011\u102c\u1038\u1031\u101e\u102c element \u104f\u1015\u1011\u1019\u1021\u1000\u1061\u101b\u102c\u104f \u1005\u102c\u101e\u102c\u1038\u1005\u1010\u102d\u102f\u1004\u1039\u1000\u102d\u102f \u1031\u103b\u1015\u102c\u1004\u1039\u1038\u101c\u1032\u108f\u102d\u102f\u1004\u1039\u1015\u102b\u1010\u101a\u1039\u104b<br \/>\n\u1021\u101e\u102f\u1036\u1038\u103b\u1015\u1033\u101b\u1014\u1039 \u1021\u1001\u103c\u1004\u1037\u1039\u1021\u101c\u1019\u1039\u1038\u1019\u103a\u102c\u1038\u1005\u103c\u102c\u101b\u103d\u102d\u101e\u100a\u1039\u101f\u102f \u1019\u1011\u1004\u1039\u1031\u101e\u102c\u1039\u101c\u100a\u1039\u1038 \u101e\u102d\u1011\u102c\u1038\u101e\u1004\u1037\u1039\u101e\u100a\u1037\u1039 pseudo-element \u1010\u1005\u1039\u1001\u102f\u103b\u1016\u1005\u1039\u1015\u102b\u1010\u101a\u1039\u104b<br \/>\n\u1031\u1016\u102c\u1004\u1037\u1039\u101e\u1010\u1039\u1019\u103d\u1010\u1039\u1001\u103a\u1000\u1039\u1021\u1010\u103c\u1000\u1039 CSS \u1000\u102d\u102f \u1010\u1005\u1039\u1001\u102f\u101c\u102f\u1036\u1038\u1021\u1031\u1014\u1014\u1032\u1094 \u101e\u102f\u1036\u1038\u101c\u102d\u102f\u1094\u101b\u1015\u102b\u1010\u101a\u1039\u104b<\/p>\n<pre class=\"brush: css; notranslate\" title=\"\">\r\n\/\/ HTML\r\n<p class=\"first-txt\">Only the first text can be styled.<\/p>\r\n\/\/ CSS\r\n\r\n.first-txt::first-letter {\r\n  font-size: 24px;\r\n  font-weight: bold;\r\n  color: #4f87ff;\r\n  font-style: italic;\r\n}\r\n\r\n<\/pre>\n<p>Result: <span style=\"color: #4f87ff\">O<\/span>nly the first text can be styled.<\/p>\n<h3>::first-line<\/h3>\n<p>\u101e\u1010\u1039\u1019\u103d\u1010\u1039\u1011\u102c\u1038\u1031\u101e\u102c element \u101b\u1032\u1095\u1015\u1011\u1019\u1005\u102c\u1031\u107e\u1000\u102c\u1004\u1039\u1038\u1010\u103c\u1004\u1039 \u1005\u102c\u101e\u102c\u1038\u1015\u102f\u1036\u1005\u1036\u1000\u102d\u102f \u1031\u103b\u1015\u102c\u1004\u1039\u1038\u101c\u1032\u108f\u102d\u102f\u1004\u1039\u1015\u102b\u1010\u101a\u1039\u104b<br \/>\n:: first-letter\u108f\u103d\u1004\u1037\u1039 \u1006\u1004\u1039\u1010\u1030\u101e\u100a\u1039\u104b \u101e\u102d\u102f\u1094\u1031\u101e\u102c\u1039 ::first-line \u101e\u100a\u1039\u1015\u1011\u1019\u1005\u102c\u1031\u107e\u1000\u102c\u1004\u1039\u1038\u108f\u103d\u1004\u1037\u1039\u101e\u102c \u101e\u1000\u1039\u1006\u102d\u102f\u1004\u1039\u1015\u102b\u1010\u101a\u1039\u104b<\/p>\n<pre class=\"brush: css; notranslate\" title=\"\">\r\n\/\/ HTML\r\n<p class=\"first-line\">Only the first line will be styled. The second and subsequent lines do not apply. The second and subsequent lines do not apply.<\/p>\r\n\/\/ CSS\r\n\r\n.first-line::first-line {\r\n  font-size: 24px;\r\n  font-weight: bold;\r\n  color: #ff4fb6;\r\n}\r\n\r\n<\/pre>\n<p>Result:<\/p>\n<p><span style=\"color: #ff4fb6\">Only the first line will be styled.<\/span><br \/>\nIt does not apply to the second and subsequent lines.<br \/>\nIt does not apply to the second and subsequent lines.<\/p>\n<p>&nbsp;<\/p>\n<h3>::placeholder<\/h3>\n<p>HTML input tag or multi-line text input control (text area)tag \u104f placeholder \u1000\u102d\u102f style \u1031\u103b\u1015\u102c\u1004\u1039\u1038\u101c\u1032\u108f\u102d\u102f\u1004\u1039\u1015\u102b\u1010\u101a\u1039\u104b<\/p>\n<pre class=\"brush: css; notranslate\" title=\"\">\/\/ HTML\r\n\uff1cinput type=\"text\" class=\"content-placeholder\" placeholder=\"you can change style\"\uff1e\r\n\r\n\/\/ CSS\r\n.content-placeholder::placeholder {\r\n  color: #48e4ff;\r\n  font-weight: bold;\r\n  font-size: 14px;\r\n}\r\n<\/pre>\n<p>&nbsp;<\/p>\n<h2>What you can do with pseudo elements?<\/h2>\n<h3>1.Count the number of elements<\/h3>\n<p>CSS \u101b\u1032\u1095 <strong>counter-increment <\/strong> \u101c\u102d\u102f\u1094\u1031\u1001\u105a\u1010\u1032\u1037 property \u1000\u102d\u102f\u1021\u101e\u102f\u1036\u1038\u103b\u1015\u1033\u107f\u1015\u102e\u1038 \u1031\u101b\u1038\u1019\u101a\u1039\u1006\u102d\u102f\u101b\u1004\u1039 element \u101b\u1032\u1095 count \u1000 auto \u1010\u102d\u102f\u1038\u101e\u103c\u102c\u1038\u1019\u103d\u102c\u103b\u1016\u1005\u1039\u1015\u102b\u1010\u101a\u1039\u104b \u1031\u1021\u102c\u1000\u1039\u1015\u102b example code \u1000\u102d\u102f copy \u101a\u1030\u107f\u1015\u102e\u1038 \u1018\u101a\u1039\u101c\u102d\u102f\u1021\u1031\u103b\u1016\u101b\u1019\u101c\u1032 \u1005\u1019\u1039\u1038\u107e\u1000\u100a\u1039\u1037\u1031\u1015\u1038\u1015\u102b\u1031\u1014\u102c\u1039\u104b<\/p>\n<pre class=\"brush: css; notranslate\" title=\"\">\r\n\/\/ HTML\r\n<ul class=\"element-count\">\r\n  <li>Count<\/li>\r\n  <li>Count<\/li>\r\n  <li>Count\/li&gt;\r\n  <li>Count<\/li>\r\n  <li>Count<\/li>\r\n  <li>Count<\/li>\r\n<\/ul>\r\n\r\n\/\/ CSS\r\n\r\n.element-count li {\r\n  counter-increment: count;\r\n  position: relative;\r\n  padding-left: 3.3em;\r\n}\r\n.element-count li::before {\r\n  position: absolute;\r\n  content: counter(count) \"item\";\r\n  left: 0;\r\n  top: 0;\r\n  color: #ff7b00;\r\n}\r\n\r\n<\/pre>\n<p>&nbsp;<\/p>\n<h3>2.Add characters before and after the element<\/h3>\n<pre class=\"brush: css; notranslate\" title=\"\">\r\n\/\/ HTML\r\n<p class=\"txt-mark\">You can put  symbol before and after the text<\/p>\r\n\r\n\/\/ CSS\r\n\r\n.txt-mark {\r\n  display: inline-block;\r\n}\r\n.txt-mark::before {\r\n  content: \"\u2606\";\r\n  color: red;\r\n}\r\n.txt-mark::after {\r\n  content: \"\u2605\";\r\n  color: blue;\r\n}\r\n\r\n<\/pre>\n<p>Result:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8088\" src=\"https:\/\/spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2022\/07\/img_example02_03.jpg\" alt=\"\" width=\"559\" height=\"38\" srcset=\"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2022\/07\/img_example02_03.jpg 559w, https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2022\/07\/img_example02_03-300x20.jpg 300w\" sizes=\"auto, (max-width: 559px) 100vw, 559px\" \/><\/p>\n<h3>3.Diagonal background<\/h3>\n<pre class=\"brush: css; notranslate\" title=\"\">\r\n\/\/ HTML\r\n<div class=\"mv\">\r\n  <div class=\"inner-block\">\r\n    <p class=\"txt\">\r\n      Title Title<br> Title Title\r\n    <\/p>\r\n  <\/div>\r\n<\/div>\r\n \r\n\/\/ CSS\r\n\r\n.inner-block {\r\n  position: relative;\r\n  width: 1040px;\r\n  padding: 0 30px;\r\n  margin: 0 auto;\r\n  height: 100%;\r\n}\r\n.mv {\r\n  height: 800px;\r\n  background-color: #d4d4d4;\r\n  position: relative;\r\n  z-index: 1;\r\n}\r\n.mv .txt {\r\n  font-size: 45px;\r\n  font-weight: bold;\r\n  height: 100%;\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n.mv::before {\r\n  position: absolute;\r\n  content: \"\";\r\n  width: calc(50% - 150px);\r\n  height: 100%;\r\n  left: 0;\r\n  top: 0;\r\n  background-color: #79ccdb;\r\n  z-index: -1;\r\n}\r\n.mv::after {\r\n  position: absolute;\r\n  content: \"\";\r\n  width: 300px;\r\n  height: 100%;\r\n  background-color: #79ccdb;\r\n  left: calc(50% - 300px);\r\n  top: 0;\r\n  bottom: 0;\r\n  margin: auto;\r\n  transform: skewX(-20deg);\r\n  z-index: -1;\r\n}\r\n\r\n<\/pre>\n<p>Result:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8039\" src=\"https:\/\/spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2022\/07\/img_example03.png\" alt=\"\" width=\"1920\" height=\"937\" srcset=\"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2022\/07\/img_example03.png 1920w, https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2022\/07\/img_example03-300x146.png 300w, https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2022\/07\/img_example03-768x375.png 768w, https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2022\/07\/img_example03-1024x500.png 1024w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/p>\n<h2>Summary<\/h2>\n<p>\u1012\u102e\u1010\u1005\u1039\u1001\u102b\u1019\u103d\u102c\u1031\u1010\u102c\u1037 Pseudo-element \u1000\u102d\u102f \u1019\u102d\u1010\u1039\u1006\u1000\u1039\u1031\u1015\u1038\u101c\u102d\u102f\u1000\u1039\u1015\u102b\u1010\u101a\u1039\u104b \u1021\u101e\u102f\u1036\u1038\u103b\u1015\u1033\u1014\u100a\u1039\u1038 \u1005\u100a\u1039\u1038\u1019\u103a\u1025\u1039\u1038\u1019\u103a\u102c\u1038 \u101b\u103d\u102d\u1031\u1014\u1031\u101e\u102c\u1031\u107e\u1000\u102c\u1004\u1037\u1039 \u1005\u102d\u1010\u1039\u101b\u1088\u1015\u1039\u1031\u1011\u103c\u1038\u1031\u1014\u108f\u102d\u102f\u1004\u1039\u1015\u102b\u1010\u101a\u1039\u104b<br \/>\n\u1012\u102b\u1031\u1015\u1019\u101a\u1037\u1039 ::before \u1014\u1032\u1094 ::after \u101f\u102c coding \u1021\u1010\u103c\u1000\u1039 \u101c\u102f\u1036\u1038\u101d\u101c\u102d\u102f\u1021\u1015\u1039\u1010\u101a\u1039\u101c\u102d\u102f\u1094 \u1011\u1004\u1039\u1015\u102b\u1010\u101a\u1039\u104b Pseudo-element \u1000\u102d\u102f \u1010\u103b\u1016\u100a\u1039\u1038\u103b\u1016\u100a\u1039\u1038\u108f\u103d\u1004\u1037\u1039 \u1021\u101e\u102f\u1036\u1038\u103b\u1015\u1033\u101c\u102c\u101c\u102d\u1019\u1037\u1039\u1019\u100a\u1039\u101f\u102f \u1031\u1019\u103d\u103a\u102c\u1039\u101c\u1004\u1037\u1039\u1015\u102b\u1010\u101a\u1039\u104b<br \/>\n\u1021\u1006\u102f\u1036\u1038\u1021\u1011\u102d \u1016\u1010\u1039\u101b\u1088\u1031\u1015\u1038\u1010\u1032\u1037\u1021\u1010\u103c\u1000\u1039 \u1031\u1000\u103a\u1038\u1007\u1030\u1038\u1010\u1004\u1039\u1015\u102b\u1010\u101a\u1039\u104b<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u1019\u1002\u1064\u101c\u102c\u1015\u102b\u101b\u103d\u1004\u1039\u1037\u104b Spiceworks Myanmar \u1019\u103d\u102c Web Designer \u1021\u103b\u1016\u1005\u1039 \u1010\u102c\u101d\u1014\u1039\u101a\u1030\u101c\u102f\u1015\u1039\u1000\u102d\u102f\u1004\u1039\u1031\u1014\u1010\u1032\u1094 \u1006\u102f\u101b\u100a\u1039\u1011\u103c\u1014\u1039\u1038\u1015\u102b\u104b \u1012\u102e\u1010\u1005\u1039\u1031\u1001\u102b\u1000\u1039\u1031\u101b\u103c\u1038\u1001\u103a\u101a\u1039\u1011\u102c\u1038\u1010\u102c\u1000\u1031\u1010\u102c\u1037 CSS \u1019\u103d\u102c \u1021\u101e\u102f\u1036\u1038\u1019\u103a\u102c\u1038\u1010\u1032\u1037 &#8220;pseudo-element&#8221; \u1021\u1031\u107e\u1000\u102c\u1004\u1039\u1038 \u1031\u1006\u103c\u1038\u1031\u108f\u103c\u1038\u101e\u103c\u102c\u1038\u1001\u103a\u1004\u1039\u1015\u102b\u1010\u101a\u1039\u104b Pseudo-element \u101c\u102d\u102f\u1094\u1031\u103b\u1015\u102c\u101c\u102d\u102f\u1000\u1039\u101b\u1004\u1039 code \u1031\u101b\u1038\u101e\u1030\u1031\u1010\u103c\u1021\u1010\u103c\u1000\u1039<\/p>\n","protected":false},"author":25,"featured_media":8010,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-8006","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-coding"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Let&#039;s understand pseudo-element - Web Development &amp; Tech Blog | Spiceworks Myanmar<\/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:\/\/www.spiceworksmyanmar.com\/blog\/lets-understand-pseudo-element\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Let&#039;s understand pseudo-element - Web Development &amp; Tech Blog | Spiceworks Myanmar\" \/>\n<meta property=\"og:description\" content=\"\u1019\u1002\u1064\u101c\u102c\u1015\u102b\u101b\u103d\u1004\u1039\u1037\u104b Spiceworks Myanmar \u1019\u103d\u102c Web Designer \u1021\u103b\u1016\u1005\u1039 \u1010\u102c\u101d\u1014\u1039\u101a\u1030\u101c\u102f\u1015\u1039\u1000\u102d\u102f\u1004\u1039\u1031\u1014\u1010\u1032\u1094 \u1006\u102f\u101b\u100a\u1039\u1011\u103c\u1014\u1039\u1038\u1015\u102b\u104b \u1012\u102e\u1010\u1005\u1039\u1031\u1001\u102b\u1000\u1039\u1031\u101b\u103c\u1038\u1001\u103a\u101a\u1039\u1011\u102c\u1038\u1010\u102c\u1000\u1031\u1010\u102c\u1037 CSS \u1019\u103d\u102c \u1021\u101e\u102f\u1036\u1038\u1019\u103a\u102c\u1038\u1010\u1032\u1037 &#8220;pseudo-element&#8221; \u1021\u1031\u107e\u1000\u102c\u1004\u1039\u1038 \u1031\u1006\u103c\u1038\u1031\u108f\u103c\u1038\u101e\u103c\u102c\u1038\u1001\u103a\u1004\u1039\u1015\u102b\u1010\u101a\u1039\u104b Pseudo-element \u101c\u102d\u102f\u1094\u1031\u103b\u1015\u102c\u101c\u102d\u102f\u1000\u1039\u101b\u1004\u1039 code \u1031\u101b\u1038\u101e\u1030\u1031\u1010\u103c\u1021\u1010\u103c\u1000\u1039\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.spiceworksmyanmar.com\/blog\/lets-understand-pseudo-element\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Development &amp; Tech Blog | Spiceworks Myanmar\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-22T11:06:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-11T07:47:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2022\/07\/cover_pseudo-element.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"700\" \/>\n\t<meta property=\"og:image:height\" content=\"366\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Su Yee Htun\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Su Yee Htun\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/lets-understand-pseudo-element\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/lets-understand-pseudo-element\\\/\"},\"author\":{\"name\":\"Su Yee Htun\",\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/#\\\/schema\\\/person\\\/2010bdf4c188662cb592c96ea17b2561\"},\"headline\":\"Let&#8217;s understand pseudo-element\",\"datePublished\":\"2022-07-22T11:06:27+00:00\",\"dateModified\":\"2022-08-11T07:47:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/lets-understand-pseudo-element\\\/\"},\"wordCount\":205,\"image\":{\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/lets-understand-pseudo-element\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/07\\\/cover_pseudo-element.jpg\",\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/lets-understand-pseudo-element\\\/\",\"url\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/lets-understand-pseudo-element\\\/\",\"name\":\"Let's understand pseudo-element - Web Development &amp; Tech Blog | Spiceworks Myanmar\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/lets-understand-pseudo-element\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/lets-understand-pseudo-element\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/07\\\/cover_pseudo-element.jpg\",\"datePublished\":\"2022-07-22T11:06:27+00:00\",\"dateModified\":\"2022-08-11T07:47:23+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/#\\\/schema\\\/person\\\/2010bdf4c188662cb592c96ea17b2561\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/lets-understand-pseudo-element\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/lets-understand-pseudo-element\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/lets-understand-pseudo-element\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/07\\\/cover_pseudo-element.jpg\",\"contentUrl\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/07\\\/cover_pseudo-element.jpg\",\"width\":700,\"height\":366},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/lets-understand-pseudo-element\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Let&#8217;s understand pseudo-element\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/\",\"name\":\"Web Development &amp; Tech Blog | Spiceworks Myanmar\",\"description\":\"Read Spiceworks Myanmar\u2019s blog on web development, design trends, and IT solutions. Stay informed with tips and insights from our experienced developers.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/#\\\/schema\\\/person\\\/2010bdf4c188662cb592c96ea17b2561\",\"name\":\"Su Yee Htun\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/058b6aef84ef5816de8b8f0bd979f5f96873b0bae29c62f4df765e1366fdfdde?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/058b6aef84ef5816de8b8f0bd979f5f96873b0bae29c62f4df765e1366fdfdde?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/058b6aef84ef5816de8b8f0bd979f5f96873b0bae29c62f4df765e1366fdfdde?s=96&d=mm&r=g\",\"caption\":\"Su Yee Htun\"},\"url\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/author\\\/su-yee-htun\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Let's understand pseudo-element - Web Development &amp; Tech Blog | Spiceworks Myanmar","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.spiceworksmyanmar.com\/blog\/lets-understand-pseudo-element\/","og_locale":"en_US","og_type":"article","og_title":"Let's understand pseudo-element - Web Development &amp; Tech Blog | Spiceworks Myanmar","og_description":"\u1019\u1002\u1064\u101c\u102c\u1015\u102b\u101b\u103d\u1004\u1039\u1037\u104b Spiceworks Myanmar \u1019\u103d\u102c Web Designer \u1021\u103b\u1016\u1005\u1039 \u1010\u102c\u101d\u1014\u1039\u101a\u1030\u101c\u102f\u1015\u1039\u1000\u102d\u102f\u1004\u1039\u1031\u1014\u1010\u1032\u1094 \u1006\u102f\u101b\u100a\u1039\u1011\u103c\u1014\u1039\u1038\u1015\u102b\u104b \u1012\u102e\u1010\u1005\u1039\u1031\u1001\u102b\u1000\u1039\u1031\u101b\u103c\u1038\u1001\u103a\u101a\u1039\u1011\u102c\u1038\u1010\u102c\u1000\u1031\u1010\u102c\u1037 CSS \u1019\u103d\u102c \u1021\u101e\u102f\u1036\u1038\u1019\u103a\u102c\u1038\u1010\u1032\u1037 &#8220;pseudo-element&#8221; \u1021\u1031\u107e\u1000\u102c\u1004\u1039\u1038 \u1031\u1006\u103c\u1038\u1031\u108f\u103c\u1038\u101e\u103c\u102c\u1038\u1001\u103a\u1004\u1039\u1015\u102b\u1010\u101a\u1039\u104b Pseudo-element \u101c\u102d\u102f\u1094\u1031\u103b\u1015\u102c\u101c\u102d\u102f\u1000\u1039\u101b\u1004\u1039 code \u1031\u101b\u1038\u101e\u1030\u1031\u1010\u103c\u1021\u1010\u103c\u1000\u1039","og_url":"https:\/\/www.spiceworksmyanmar.com\/blog\/lets-understand-pseudo-element\/","og_site_name":"Web Development &amp; Tech Blog | Spiceworks Myanmar","article_published_time":"2022-07-22T11:06:27+00:00","article_modified_time":"2022-08-11T07:47:23+00:00","og_image":[{"width":700,"height":366,"url":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2022\/07\/cover_pseudo-element.jpg","type":"image\/jpeg"}],"author":"Su Yee Htun","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Su Yee Htun","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/lets-understand-pseudo-element\/#article","isPartOf":{"@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/lets-understand-pseudo-element\/"},"author":{"name":"Su Yee Htun","@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/#\/schema\/person\/2010bdf4c188662cb592c96ea17b2561"},"headline":"Let&#8217;s understand pseudo-element","datePublished":"2022-07-22T11:06:27+00:00","dateModified":"2022-08-11T07:47:23+00:00","mainEntityOfPage":{"@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/lets-understand-pseudo-element\/"},"wordCount":205,"image":{"@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/lets-understand-pseudo-element\/#primaryimage"},"thumbnailUrl":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2022\/07\/cover_pseudo-element.jpg","articleSection":["Coding"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/lets-understand-pseudo-element\/","url":"https:\/\/www.spiceworksmyanmar.com\/blog\/lets-understand-pseudo-element\/","name":"Let's understand pseudo-element - Web Development &amp; Tech Blog | Spiceworks Myanmar","isPartOf":{"@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/lets-understand-pseudo-element\/#primaryimage"},"image":{"@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/lets-understand-pseudo-element\/#primaryimage"},"thumbnailUrl":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2022\/07\/cover_pseudo-element.jpg","datePublished":"2022-07-22T11:06:27+00:00","dateModified":"2022-08-11T07:47:23+00:00","author":{"@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/#\/schema\/person\/2010bdf4c188662cb592c96ea17b2561"},"breadcrumb":{"@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/lets-understand-pseudo-element\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.spiceworksmyanmar.com\/blog\/lets-understand-pseudo-element\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/lets-understand-pseudo-element\/#primaryimage","url":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2022\/07\/cover_pseudo-element.jpg","contentUrl":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2022\/07\/cover_pseudo-element.jpg","width":700,"height":366},{"@type":"BreadcrumbList","@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/lets-understand-pseudo-element\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.spiceworksmyanmar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Let&#8217;s understand pseudo-element"}]},{"@type":"WebSite","@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/#website","url":"https:\/\/www.spiceworksmyanmar.com\/blog\/","name":"Web Development &amp; Tech Blog | Spiceworks Myanmar","description":"Read Spiceworks Myanmar\u2019s blog on web development, design trends, and IT solutions. Stay informed with tips and insights from our experienced developers.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.spiceworksmyanmar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/#\/schema\/person\/2010bdf4c188662cb592c96ea17b2561","name":"Su Yee Htun","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/058b6aef84ef5816de8b8f0bd979f5f96873b0bae29c62f4df765e1366fdfdde?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/058b6aef84ef5816de8b8f0bd979f5f96873b0bae29c62f4df765e1366fdfdde?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/058b6aef84ef5816de8b8f0bd979f5f96873b0bae29c62f4df765e1366fdfdde?s=96&d=mm&r=g","caption":"Su Yee Htun"},"url":"https:\/\/www.spiceworksmyanmar.com\/blog\/author\/su-yee-htun\/"}]}},"_links":{"self":[{"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/posts\/8006","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/comments?post=8006"}],"version-history":[{"count":97,"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/posts\/8006\/revisions"}],"predecessor-version":[{"id":8230,"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/posts\/8006\/revisions\/8230"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/media\/8010"}],"wp:attachment":[{"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/media?parent=8006"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/categories?post=8006"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/tags?post=8006"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}