{"id":9,"date":"2014-09-26T01:30:46","date_gmt":"2014-09-26T04:30:46","guid":{"rendered":"https:\/\/www.origamid.com\/codex\/?p=9"},"modified":"2015-03-30T20:03:36","modified_gmt":"2015-03-30T23:03:36","slug":"pseudo-elements-after-e-before-para-estilizar-titulos","status":"publish","type":"post","link":"https:\/\/www.origamid.com\/codex\/pseudo-elements-after-e-before-para-estilizar-titulos\/","title":{"rendered":"Pseudo-elements :after e :before para estilizar t\u00edtulos"},"content":{"rendered":"<h2>A sintax do :after e :before<\/h2>\n<p>Utilizar linhas para compor um t\u00edtulo pode fazer toda a diferen\u00e7a. E voc\u00ea n\u00e3o precisa criar elementos no HTML para adicionar essas linhas, basta utilizar as pseudo-classes :before ou :after do CSS<\/p>\n<p>Abaixo temos um exemplo de t\u00edtulo estilizado com linhas acima e abaixo do mesmo.<\/p>\n<img decoding=\"async\" src=\"https:\/\/www.origamid.com\/codex\/wp-content\/uploads\/2014\/09\/og-titulo-pseudo-elements-after-e-before.jpg\" alt=\"Pseudo-elements :after e :before para estilizar t\u00edtulos\" \/>\n<p>Para alcan\u00e7ar o resultado bastam poucas linhas de CSS e nenhuma adi\u00e7\u00e3o de elementos HTML.<\/p>\n<h4>CSS<\/h4>\n<pre><code class=\"language-css\">h2 {\n  color: #6d2db0;\n  font-size: 2em;\n  text-align: center;\n}\n\nh2:after, h2:before {\n  content: '';\n  display: block;\n  width: 80px;\n  height: 3px;\n  background: #6d2db0;\n  margin: 0 auto;\n}\n<\/code><\/pre>\n<p>A \u00fanica propriedade que pode confundir um pouco \u00e9 a content. No caso temos que criar a mesma e atribuir um valor qualquer (no exemplo um valor nulo foi atribu\u00eddo), para que o elemento seja criado dentro do HTML.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A sintax do :after e :before Utilizar linhas para compor um t\u00edtulo pode fazer toda a diferen\u00e7a. E voc\u00ea n\u00e3o precisa criar elementos no HTML para adicionar essas linhas, basta utilizar as pseudo-classes :before ou :after do CSS Abaixo temos um exemplo de t\u00edtulo estilizado com linhas acima e abaixo do mesmo. Para alcan\u00e7ar o [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[],"acf":[],"_links":{"self":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/9"}],"collection":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":27,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/9\/revisions"}],"predecessor-version":[{"id":44,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/9\/revisions\/44"}],"wp:attachment":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/media?parent=9"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/categories?post=9"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/tags?post=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}