{"id":1513,"date":"2019-10-02T11:13:41","date_gmt":"2019-10-02T03:13:41","guid":{"rendered":"http:\/\/jilin.hydesign.tw\/?p=1513"},"modified":"2021-10-23T21:14:03","modified_gmt":"2021-10-23T13:14:03","slug":"css-pseudo-elements","status":"publish","type":"post","link":"http:\/\/jilin.hydesign.tw\/index.php\/2019\/10\/02\/css-pseudo-elements\/","title":{"rendered":"CSS Pseudo Elements \u507d\u5143\u7d20"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\"> ::before \u8207 ::after <\/h2>\n\n\n\n<p>::before\u5728\u5143\u7d20\u4e4b\u524d\u52a0\u5165\u5167\u5bb9\uff0c ::after \u5728\u5143\u7d20\u4e4b\u5f8c\u52a0\u5165\u5167\u5bb9  <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">content:&#8221;&#8221;;\u4f7f\u7528<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">div::before{\n    content:\"\u6211\u662f before\";\n    color:red;\n}\ndiv::after{\n    content:\"\u6211\u662f after\";\n    color:red;\n}<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"> href \u4f7f\u7528<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">a::before{\n  content: attr(href);\n  color:red;\n}\na::after{\n  content: attr(target);\n  color:green;\n}<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"> content:&#8221;&#8221;;  +  href  <\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">a::before{\n  content: \"( \" attr(href) \" ) &lt; \";\n  color:red;\n}\na::after{\n  content: \" > ( \" attr(target) \" ) \";\n  color:green;\n}<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"> content:&#8221;&#8221;;  +  url<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"> div::before{ content:url(\u5716\u7247\u7db2\u5740) url(\u5716\u7247\u7db2\u5740) url(\u5716\u7247\u7db2\u5740); } <\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"> content:&#8221;&#8221;;  +  quotes \u62ec\u865f\u683c\u5f0f<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">q{\n  quotes: ' &lt; ' ' > ';\n}\n\nq{\n  quotes: ' &lt; ' ' > ' ' ya ' ' ya ' ' ( ' ' ) ' ; \/*3\u5c64*\/<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"> content:&#8221;&#8221;;  +  open-quote ( \u555f\u59cb\u62ec\u865f ) \u548c close-quote ( \u7d50\u675f\u62ec\u865f )<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">span{\n  quotes: ' &lt; ' ' > ' ' ya ' ' ya ' ' ( ' ' ) ' ;\n}\nspan::before{\n  content:open-quote;\n  color:red;\n}\nspan::after{\n  content:close-quote;\n  color:#aaa;\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">::first-letter\u00a0Selector<\/h2>\n\n\n\n<p>\u9078\u64c7\u6bcf\u500b\u5143\u7d20\u5b57\u9996\uff0c\u5b9a\u7fa9\u6a23\u5f0f\u3002<\/p>\n\n\n\n<p>\u53ef\u4e00\u8d77\u914d\u5408\u5c6c\u6027\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>font properties<\/li><li>color properties<\/li><li>background properties<\/li><li>margin properties<\/li><li>padding properties<\/li><li>border properties<\/li><li>text-decoration<\/li><li>vertical-align (only if float is &#8216;none&#8217;)<\/li><li>text-transform<\/li><li>line-height<\/li><li>float<\/li><li>clear<\/li><\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">p::first-letter {\n  font-size: 200%;\n  color: #8A2BE2;\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">::selection Selector<\/h2>\n\n\n\n<p>\u5b9a\u7fa9\u6240\u9078\u64c7\u5143\u7d20(\u4f8b\uff1a\u6ed1\u9f20\u9078\u53d6\u6587\u7ae0)\u6a23\u5f0f\u3002<\/p>\n\n\n\n<p>\u53ef\u4e00\u8d77\u914d\u5408\u5c6c\u6027\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>color<\/li><li>background-color<\/li><li>cursor<\/li><li>caret-color<\/li><li>outline and its longhands<\/li><li>text-decoration and its associated properties<\/li><li>text-emphasis-color<\/li><li>text-shadow<\/li><\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">::selection {\n  color: red;\n  background: yellow;\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>::before \u8207 ::after ::before\u5728\u5143\u7d20\u4e4b\u524d\u52a0\u5165\u5167\u5bb9\uff0c ::after \u5728\u5143\u7d20\u4e4b\u5f8c\u52a0\u5165\u5167\u5bb9&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,12,4],"tags":[],"class_list":["post-1513","post","type-post","status-publish","format-standard","hentry","category-css","category-front-end","category-notes"],"_links":{"self":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/1513","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/comments?post=1513"}],"version-history":[{"count":26,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/1513\/revisions"}],"predecessor-version":[{"id":2212,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/1513\/revisions\/2212"}],"wp:attachment":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/media?parent=1513"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/categories?post=1513"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/tags?post=1513"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}