{"id":93,"date":"2016-08-25T10:28:18","date_gmt":"2016-08-25T02:28:18","guid":{"rendered":"http:\/\/www.magki.com\/blog\/?p=93"},"modified":"2022-01-20T17:09:44","modified_gmt":"2022-01-20T09:09:44","slug":"kala-ok-subtitle-of-link-by-css3","status":"publish","type":"post","link":"http:\/\/www.ijony.com\/blog\/2016\/08\/kala-ok-subtitle-of-link-by-css3.html","title":{"rendered":"\u7eaf CSS3 \u5b9e\u73b0\u9f20\u6807\u79fb\u4e0a\u94fe\u63a5\u7684\u5361\u62c9OK\u5b57\u5e55\u6548\u679c"},"content":{"rendered":"\n<p>\u76f4\u63a5\u4e0a CSS \u4ee3\u7801 <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css line-numbers\">a {\n    display: inline-block;\n    color: #404040;\n    text-decoration: none;\n    overflow: hidden;\n    position: relative;\n}\n\na::before {\n\tcontent: attr(data-letters);\n\tcolor: #f34540;\n\twidth: 0;\n\tbackground: #fff;\n\toverflow: hidden;\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tz-index: 2;\n\twhite-space: nowrap;\n\ttransition: width .5s;\n}\n\na:hover::before{\n\twidth: 100%;\n\ttransition: width .5s;\n}<\/code><\/pre>\n\n\n\n<p>\u7136\u540e\u5c31\u662f HTML \u8303\u4f8b<\/p>\n\n\n\n<style>\na.test {\n    display: inline-block;\n    color: #404040;\n    text-decoration: none;\n    overflow: hidden;\n    position: relative;\n}\n\na.test::before {\n\tcontent: attr(data-letters);\n\tcolor: #f34540;\n\twidth: 0;\n\tbackground: #fff;\n\toverflow: hidden;\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tz-index: 2;\n\twhite-space: nowrap;\n\ttransition: width .5s;\n}\n\na.test:hover::before{\n\twidth: 100%;\n\ttransition: width .5s;\n}\n<\/style>\n<pre class=\"wp-block-preformatted\"><a class=\"test\" data-letters=\"\u6d4b\u8bd5\u4e00\u4e0b\u6587\u5b57\u7684\u6e10\u53d8\u7279\u6548\" href=\"#\">\u6d4b\u8bd5\u4e00\u4e0b\u6587\u5b57\u7684\u6e10\u53d8\u7279\u6548<\/a>\n<\/pre>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u76f4\u63a5\u4e0a CSS \u4ee3\u7801 \u7136\u540e\u5c31\u662f HTML \u8303\u4f8b \u6d4b\u8bd5\u4e00\u4e0b\u6587\u5b57\u7684\u6e10\u53d8\u7279\u6548<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"http:\/\/www.ijony.com\/blog\/wp-json\/wp\/v2\/posts\/93"}],"collection":[{"href":"http:\/\/www.ijony.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.ijony.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.ijony.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.ijony.com\/blog\/wp-json\/wp\/v2\/comments?post=93"}],"version-history":[{"count":3,"href":"http:\/\/www.ijony.com\/blog\/wp-json\/wp\/v2\/posts\/93\/revisions"}],"predecessor-version":[{"id":106,"href":"http:\/\/www.ijony.com\/blog\/wp-json\/wp\/v2\/posts\/93\/revisions\/106"}],"wp:attachment":[{"href":"http:\/\/www.ijony.com\/blog\/wp-json\/wp\/v2\/media?parent=93"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.ijony.com\/blog\/wp-json\/wp\/v2\/categories?post=93"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.ijony.com\/blog\/wp-json\/wp\/v2\/tags?post=93"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}