{"id":4019,"date":"2018-12-26T19:55:17","date_gmt":"2018-12-26T17:55:17","guid":{"rendered":"http:\/\/sasogu.es\/blog\/?p=4019"},"modified":"2018-12-26T19:55:17","modified_gmt":"2018-12-26T17:55:17","slug":"los-pseudo-elementos-before-y-after","status":"publish","type":"post","link":"https:\/\/edutictac.es\/blog\/sasogu\/los-pseudo-elementos-before-y-after\/","title":{"rendered":"Los pseudo-elementos :before y :after"},"content":{"rendered":"<p>Los pseudo-elementos <code>:before<\/code> y <code>:after<\/code> se utilizan en combinaci\u00f3n con la propiedad <code>content<\/code> de CSS para a\u00f1adir contenidos antes o despu\u00e9s del contenido original de un elemento.<\/p>\n<p>Las siguientes reglas CSS a\u00f1aden el texto <code>Cap\u00edtulo -<\/code> delante de cada t\u00edtulo de secci\u00f3n <code>&lt;h1&gt;<\/code> y el car\u00e1cter <code>.<\/code> detr\u00e1s de cada p\u00e1rrafo de la p\u00e1gina:<\/p>\n<div class=\"code css\">\n<pre class=\"css\">h1<span class=\"re2\">:before <\/span><span class=\"br0\">{<\/span> <span class=\"kw1\">content<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">\"Cap\u00edtulo - \"<\/span><span class=\"sy0\">;<\/span> <span class=\"br0\">}<\/span>\np<span class=\"re2\">:after   <\/span><span class=\"br0\">{<\/span> <span class=\"kw1\">content<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">\".\"<\/span><span class=\"sy0\">;<\/span> <span class=\"br0\">}<\/span><\/pre>\n<\/div>\n<p>El contenido insertado mediante los pseudo-elementos <code>:before<\/code> y <code>:after<\/code> se tiene en cuenta en los otros pseudo-elementos <code>:first-line<\/code> y <code>:first-letter<\/code>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Los pseudo-elementos :before y :after se utilizan en combinaci\u00f3n con la propiedad content de CSS para a\u00f1adir contenidos antes o despu\u00e9s del contenido original de un elemento. Las siguientes reglas CSS a\u00f1aden el texto Cap\u00edtulo &#8211; delante de cada t\u00edtulo de secci\u00f3n &lt;h1&gt; y el car\u00e1cter . detr\u00e1s de cada p\u00e1rrafo de la p\u00e1gina: h1:before &#8230; <a title=\"Los pseudo-elementos :before y :after\" class=\"read-more\" href=\"https:\/\/edutictac.es\/blog\/sasogu\/los-pseudo-elementos-before-y-after\/\" aria-label=\"M\u00e9s informaci\u00f3 sobre Los pseudo-elementos :before y :after\">Llegiu m\u00e9s<\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":""},"categories":[5],"tags":[18,53],"class_list":["post-4019","post","type-post","status-publish","format-standard","hentry","category-tic","tag-css","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/edutictac.es\/blog\/sasogu\/wp-json\/wp\/v2\/posts\/4019","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/edutictac.es\/blog\/sasogu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/edutictac.es\/blog\/sasogu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/edutictac.es\/blog\/sasogu\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/edutictac.es\/blog\/sasogu\/wp-json\/wp\/v2\/comments?post=4019"}],"version-history":[{"count":0,"href":"https:\/\/edutictac.es\/blog\/sasogu\/wp-json\/wp\/v2\/posts\/4019\/revisions"}],"wp:attachment":[{"href":"https:\/\/edutictac.es\/blog\/sasogu\/wp-json\/wp\/v2\/media?parent=4019"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/edutictac.es\/blog\/sasogu\/wp-json\/wp\/v2\/categories?post=4019"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/edutictac.es\/blog\/sasogu\/wp-json\/wp\/v2\/tags?post=4019"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}