{"id":2046,"date":"2022-01-20T17:47:49","date_gmt":"2022-01-20T10:47:49","guid":{"rendered":"https:\/\/www.marketenterprise.vn\/blog\/?p=2046"},"modified":"2022-03-21T20:32:53","modified_gmt":"2022-03-21T13:32:53","slug":"vi-du-ve-after-before-trong-css","status":"publish","type":"post","link":"https:\/\/www.marketenterprise.vn\/blog\/vi-du-ve-after-before-trong-css.html","title":{"rendered":"8 v\u00ed d\u1ee5 th\u1ef1c t\u1ebf \u00e1p d\u1ee5ng ::after v\u00e0 ::before trong CSS (ph\u1ea7n 1)"},"content":{"rendered":"

::after<\/code> v\u00e0 ::before<\/code> ch\u1eafc ch\u1eafn kh\u00f4ng c\u00f2n l\u00e0 CSS selector xa l\u1ea1 g\u00ec v\u1edbi c\u00e1c b\u1ea1n \u0111\u00e3 bi\u1ebft v\u1ec1 l\u1eadp tr\u00ecnh web. Tuy v\u1eady, khi g\u1eb7p m\u1ed9t UI, c\u00f3 khi b\u1ea1n l\u1ea1i kh\u00f4ng ngh\u0129 \u0111\u1ebfn n\u00f3 c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c t\u1ea1o ra b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng 2 selectors th\u1ea7n th\u00e1nh n\u00e0y. \u1ede b\u00e0i vi\u1ebft n\u00e0y, h\u00e3y c\u00f9ng m\u00ecnh t\u00ecm hi\u1ec3u 4 v\u00ed d\u1ee5 th\u1ef1c t\u1ebf c\u00f3 th\u1ec3 \u00e1p d\u1ee5ng 2 selectors n\u00e0y nh\u00e9.<\/p>\n

CSS selector v\u00e0 CSS declaration<\/h2>\n

Sau khi c\u00f3 b\u1ed9 khung HTML ch\u1eafc ch\u1eafc, trang web c\u1ee7a b\u1ea1n s\u1ebd c\u1ea7n CSS \u0111\u1ec3 \u0111\u1ea3m nhi\u1ec7m vai tr\u00f2 s\u1eafp \u0111\u1eb7t b\u1ed1 c\u1ee5c (layout), m\u00e0u s\u1eafc,… khi\u1ebfn trang web tr\u1edf n\u00ean \u0111\u1eb9p h\u01a1n r\u1ea5t nhi\u1ec1u.<\/p>\n

Khi h\u1ecdc CSS, ch\u1eafc ch\u1eafn c\u00e1c b\u1ea1n s\u1ebd h\u1ecdc qua: selector<\/em><\/a> v\u00e0 declaration<\/em>.<\/p>\n

V\u00ed d\u1ee5 nh\u01b0 khi x\u00e2y m\u1ed9t ng\u00f4i nh\u00e0, b\u1ea1n \u0111\u00e3 l\u00e0m xong ph\u1ea7n khung, gi\u1edd \u0111\u1ebfn giai \u0111o\u1ea1n s\u01a1n t\u01b0\u1eddng v\u00e0 trang tr\u00ed. V\u1eady b\u1ea1n c\u1ea7n th\u00f4ng tin g\u00ec \u0111\u1ec3 s\u01a1n \u0111\u01b0\u1ee3c? B\u1ea1n s\u1ebd c\u1ea7n 2 th\u00f4ng tin: s\u01a1n ch\u1ed7 n\u00e0o v\u00e0 s\u01a1n m\u00e0u g\u00ec.<\/p>\n

Quay l\u1ea1i v\u1edbi m\u1ee5c \u0111\u00edch c\u1ee7a ch\u00fang ta khi s\u1eed d\u1ee5ng CSS, \u0111\u00f3 ch\u00ednh l\u00e0 style cho c\u00e1c th\u00e0nh ph\u1ea7n tr\u00ean trang web, t\u01b0\u01a1ng t\u1ef1 nh\u01b0 b\u1ea1n l\u00e0m \u0111\u1eb9p cho ng\u00f4i nh\u00e0 c\u1ee7a m\u00ecnh v\u1eady. B\u1ea1n c\u1ea7n bi\u1ebft s\u01a1n ch\u1ed7 n\u00e0o (selector) v\u00e0 s\u01a1n m\u00e0u g\u00ec (declaration). CSS c\u0169ng nh\u01b0 v\u1eady, b\u1ea1n c\u1ea7n ch\u1ec9 cho browser bi\u1ebft b\u1ea1n mu\u1ed1n style ch\u1ed7 n\u00e0o b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng selector<\/em> v\u00e0 style ra sao s\u1eed d\u1ee5ng declaration<\/em>.<\/p>\n

\u1ede b\u00e0i vi\u1ebft h\u00f4m nay, ch\u00fang ta s\u1ebd n\u00f3i v\u1ec1 2 selector kh\u00e1 th\u00fa v\u1ecb trong CSS, \u0111\u00f3 ch\u00ednh l\u00e0 ::after<\/code><\/strong> v\u00e0 ::before<\/code><\/strong>.<\/p>\n

::after v\u00e0 ::before selector l\u00e0 g\u00ec?<\/h2>\n

Trong CSS, ::after<\/code> t\u1ea1o ra m\u1ed9t psudo-element ngay sau element \u0111\u01b0\u1ee3c ch\u1ecdn, ::before<\/code> t\u1ea1o ra m\u1ed9t psudo-element ngay tr\u01b0\u1edbc element \u0111\u01b0\u1ee3c ch\u1ecdn.<\/p>\n

V\u00ed d\u1ee5:<\/p>\n

B\u1ea1n mu\u1ed1n th\u00eam m\u1ed9t m\u0169i t\u00ean v\u00e0o sau t\u1ea5t c\u1ea3 c\u00e1c link trong trang web, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng CSS nh\u01b0 sau:<\/p>\n

\/* Add an arrow after links *\/\r\na::after {\r\n  content: \"\u2192\";\r\n}\r\n<\/pre>\n
\u0110\u00e2y l\u00e0 \u0111\u1ecbnh ngh\u0129a c\u01a1 b\u1ea3n c\u1ee7a\u00a0::after<\/code><\/strong> v\u00e0 ::before<\/code><\/strong>. Gi\u1edd ch\u00fang ta s\u1ebd t\u1edbi ph\u1ea7n th\u00fa v\u1ecb nh\u1ea5t, 8 v\u00ed d\u1ee5 th\u1ef1c t\u1ebf \u00e1p d\u1ee5ng ::after<\/code><\/strong> v\u00e0 ::before<\/code><\/strong> nh\u00e9.<\/p>\n
V\u00ed d\u1ee5 1: Th\u00eam d\u1ea5u * v\u00e0o tr\u01b0\u1eddng b\u1eaft bu\u1ed9c trong form<\/h2>\n
Trong m\u1ed9t form, b\u1ea1n th\u01b0\u1eddng th\u1ea5y c\u00e1c tr\u01b0\u1eddng b\u1eaft bu\u1ed9c hay c\u00f3 m\u1ed9t d\u1ea5u * \u0111\u1ec3 nh\u1eafc ng\u01b0\u1eddi d\u00f9ng \u0111\u00e2y l\u00e0 tr\u01b0\u1eddng b\u1eaft bu\u1ed9c. \u0110\u1ec3 l\u00e0m \u0111i\u1ec1u n\u00e0y, b\u1ea1n ho\u00e0n to\u00e0n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng ::after<\/code>.<\/p>\n
<label class=\"required\">Full name<\/label>\r\n<input type=\"text\" placeholder=\"e.g. John Doe\" \/>\r\n\r\n<style>\r\n    .required:after {\r\n        content: \" *\";\r\n        color: red;\r\n    }\r\n<\/style><\/pre>\n
V\u00e0 k\u1ebft qu\u1ea3 l\u00e0:<\/p>\n
\"required<\/p>\n
Th\u1eadt \u0111\u01a1n gi\u1ea3n ph\u1ea3i kh\u00f4ng n\u00e0o.<\/p>\n
V\u00ed d\u1ee5 2: Hi\u1ec7u \u1ee9ng khi hover cho text<\/h2>\n
B\u1ea1n c\u00f3 mu\u1ed1n khi \u0111\u01b0a chu\u1ed9t v\u00e0o m\u1ed9t link, g\u1ea1ch ch\u00e2n c\u1ee7a text s\u1ebd d\u1ea7n chuy\u1ec3n th\u00e0nh n\u1ec1n c\u1ee7a text kh\u00f4ng? Th\u1eed \u0111o\u1ea1n code sau nh\u00e9:<\/p>\n
<a href=\"#\" class=\"link\">Green<\/a>\r\n\r\n<style>\r\n.link {\r\n  text-decoration: none;\r\n  color: green;\r\n  position: relative;\r\n  transition: color ease 0.3s;\r\n}\r\n.link:hover {\r\n  color: #fff;\r\n}\r\n.link:after {\r\n  content: ' ';\r\n  position: absolute;\r\n  z-index: -1;\r\n  width: 100%;\r\n  height: 5%;\r\n  left:0;\r\n  bottom: 0;\r\n  background-color: green;\r\n  transition: all ease 0.3s;\r\n}\r\n.link:hover::after {\r\n  height: 100%\r\n}<\/pre>\n
V\u00e0 k\u1ebft qu\u1ea3 l\u00e0:<\/span><\/p>\n
\"highlight<\/p>\n
V\u00ed d\u1ee5 3: Hamburger Menu<\/h2>\n
H\u00f4m nay ch\u00fang ta s\u1ebd th\u1eed l\u00e0m hamburger menu theo phong c\u00e1ch CSS nh\u00e9.
\nTh\u1eed \u0111o\u1ea1n code sau nh\u00e9:<\/p>\n
<div class=\"hamburger-menu\"><\/div>\r\n\r\n<style>\r\n.hamburger-menu {\r\n  margin-top: 20px;\r\n  width: 50px;\r\n  height: 6px;\r\n  background: #000;\r\n  position: relative;\r\n}\r\n.hamburger-menu::before,\r\n.hamburger-menu::after {\r\n  content: '';\r\n  position: absolute;\r\n  width: 50px;\r\n  height: 6px;\r\n  background: #000;\r\n}\r\n.hamburger-menu::before{\r\n  top:-16px;\r\n}\r\n.hamburger-menu::after {\r\n  top: 16px;\r\n}\r\n<\/style><\/pre>\n
V\u00e0 k\u1ebft qu\u1ea3 l\u00e0:<\/p>\n
\"hamburger<\/p>\n
V\u00ed d\u1ee5 4: C\u00e2u tr\u00edch d\u1eabn x\u1ecbn s\u00f2<\/h2>\n
B\u1ea1n th\u1eed \u0111o\u00e1n xem \u0111o\u1ea1n code sau gi\u00fap ch\u00fang ta c\u00f3 g\u00ec nh\u00e9?<\/p>\n
<div lang=\"en\">\r\n  <blockquote>Stay hungry. Stay foolish.<\/blockquote>\r\n  <cite>- Steve Jobs<\/cite>\r\n<\/div>\r\n\r\n<style>\r\n blockquote::before {\r\n   content: open-quote;\r\n }\r\n blockquote::after {\r\n   content: close-quote;\r\n }\r\n blockquote::before,\r\n blockquote::after {\r\n   display: inline-block;\r\n   vertical-align: bottom;\r\n   color: lightgray;\r\n   font-size: 4em;\r\n   top: .2em;\r\n   position: relative;\r\n }\r\n<\/style><\/pre>\n
V\u00e0 k\u1ebft qu\u1ea3 l\u00e0:
\n\"quote<\/p>\n
K\u1ebft lu\u1eadn<\/h2>\n
Nh\u01b0 v\u1eady l\u00e0 qua b\u00e0i vi\u1ebft n\u00e0y, m\u00ecnh \u0111\u00e3 chia s\u1ebb v\u1edbi m\u1ecdi ng\u01b0\u1eddi 4 \u1ee9ng d\u1ee5ng th\u1ef1c t\u1ebf c\u1ee7a CSS ::before<\/code> v\u00e0 ::after<\/code>. Mong r\u1eb1ng n\u00f3 cho b\u1ea1n m\u1ed9t g\u00f3c nh\u00ecn v\u00e0 c\u00e1ch ti\u1ebfp c\u1eadn m\u1edbi m\u1ebb khi ch\u00fang ta s\u1eed d\u1ee5ng CSS trong c\u00f4ng vi\u1ec7c. Trong ph\u1ea7n ti\u1ebfp theo, m\u00ecnh s\u1ebd gi\u1edbi thi\u1ec7u \u0111\u1ebfn c\u00e1c b\u1ea1n 4 \u1ee9ng d\u1ee5ng th\u1ef1c t\u1ebf kh\u00e1c c\u1ee7a 2 selectors th\u1ea7n th\u00e1nh n\u00e0y nh\u00e9.<\/p>\n
C\u00e1c b\u1ea1n c\u00f3 th\u1ec3 t\u00ecm hi\u1ec3u th\u00eam v\u1ec1 CSS trong b\u00e0i vi\u1ebft li\u00ean quan sau nh\u00e9 : CSS-in-JS l\u00e0 g\u00ec? \u0110\u00f4i n\u00e9t v\u1ec1 th\u01b0 vi\u1ec7n Styled-components<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
CSS – Cascading Style Sheets l\u00e0 m\u1ed9t trong 3 b\u1ed9 ch\u00e2n kinh m\u00e0 b\u1ea5t c\u1ee9 b\u1ea1n n\u00e0o b\u01b0\u1edbc v\u00e0o th\u1ebf gi\u1edbi l\u1eadp tr\u00ecnh Web \u0111\u1ec1u s\u1ebd ph\u1ea3i kinh qua tr\u00ean con \u0111\u01b0\u1eddng c\u1ea7u \u0111\u1ea1o. \u1ede b\u00e0i vi\u1ebft h\u00f4m nay, ch\u00fang ta s\u1ebd n\u00f3i v\u1ec1 2 selector kh\u00e1 th\u00fa v\u1ecb trong CSS, \u0111\u00f3 ch\u00ednh l\u00e0 ::after v\u00e0 ::before.<\/p>\n","protected":false},"author":28,"featured_media":2047,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2046","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology"],"_links":{"self":[{"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/posts\/2046","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/users\/28"}],"replies":[{"embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/comments?post=2046"}],"version-history":[{"count":0,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/posts\/2046\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/media\/2047"}],"wp:attachment":[{"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/media?parent=2046"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/categories?post=2046"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/tags?post=2046"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}