{"id":1320,"date":"2024-08-01T18:50:18","date_gmt":"2024-08-01T16:50:18","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1320"},"modified":"2024-08-01T18:50:19","modified_gmt":"2024-08-01T16:50:19","slug":"40-pseudo-elementos-css","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/css3\/css3-basico\/40-pseudo-elementos-css\/","title":{"rendered":"40. Pseudo-elementos CSS"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Qu\u00e9 son los pseudo-elementos?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Un <strong>pseudo-elemento<\/strong> CSS es usado para dotar de un estilo espec\u00edfico a parte de un elemento. Por ejm, un <strong>pseudo-elemento<\/strong> se puede usar para:<\/p>\n\n\n\n<!--more-->\n\n\n\n<ul class=\"wp-block-list\">\n<li>Dar estilo a la primera letra o primera l\u00ednea de un elemento.<\/li>\n\n\n\n<li>Insertar contenido antes o despu\u00e9s del contenido de un elemento.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Sintaxis<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">La sintaxis de un <strong>pseudo-elemento<\/strong> es la siguiente:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">selector::pseudo-element {\n&nbsp;&nbsp;propiedad: valor;\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">El pseudo-elemento ::first-line<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Este elemento es usado para a\u00f1adir un estilo espec\u00edfico a la primera l\u00ednea de un texto.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html><br>&lt;html><br>  &lt;head><br>    &lt;style><br>      p::first-line {<br>        color: #ff0000;<br>        font-variant: small-caps;<br>      }<br>    &lt;\/style><br>  &lt;\/head><br>  &lt;body><br>    &lt;p><br>      Puedes usar el pseudo-elemento ::first-line para agregar un efecto<br>      especial a la primera l\u00ednea de un texto. Algo m\u00e1s de texto. Y a\u00fan m\u00e1s, y<br>      m\u00e1s, y m\u00e1s, y m\u00e1s, y m\u00e1s, y m\u00e1s, y m\u00e1s, y m\u00e1s, y m\u00e1s, y m\u00e1s, y m\u00e1s, y m\u00e1s.<br>    &lt;\/p><br>  &lt;\/body><br>&lt;\/html><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">El pseudo-elemento <strong><em>::first-line<\/em><\/strong> s\u00f3lo se puede aplicar a elementos de bloque. Las siguientes propiedades pueden aplicarse con ::<strong><em>first-line<\/em><\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Propiedades de fuente<\/li>\n\n\n\n<li>Propiedades de color<\/li>\n\n\n\n<li>Propiedades de color de fondo<\/li>\n\n\n\n<li>word-spacing<\/li>\n\n\n\n<li>letter-spacing<\/li>\n\n\n\n<li>text-decoration<\/li>\n\n\n\n<li>vertical-align<\/li>\n\n\n\n<li>text-transform<\/li>\n\n\n\n<li>line-height<\/li>\n\n\n\n<li>clear<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Observa la notaci\u00f3n de dos puntos dobles: <strong><em>::first-line<\/em><\/strong> frente <strong><em>a:first-line<\/em><\/strong>.&nbsp;Los dos puntos dobles reemplazaron la notaci\u00f3n de dos puntos para los <strong>pseudo-elementos<\/strong> en <strong>CSS3<\/strong>. Este fue un intento del <strong>W3C<\/strong> de distinguir entre <strong>pseudo-clases<\/strong> y <strong>pseudo-elementos<\/strong>.&nbsp;La sintaxis de dos puntos se us\u00f3 tanto para <strong>pseudo-clases<\/strong> como para <strong>pseudo-elementos<\/strong> en <strong>CSS2<\/strong> y <strong>CSS1<\/strong>.&nbsp;Para la compatibilidad con versiones anteriores, la sintaxis de dos puntos es aceptable para los pseudoelementos <strong>CSS2<\/strong> y <strong>CSS1<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">El pseudo-elemento ::first-letter<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Este <strong>pseudo-elemento<\/strong> es usado para a\u00f1adir un estilo especial a la primera letra de un texto.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">p::first-letter {\n&nbsp; color: #ff0000;\n&nbsp; font-size: xx-large;\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">::<strong><em>first-letter<\/em><\/strong> s\u00f3lo puede ser utilizado para elementos de bloque, y se puede aplicar a las siguientes propiedades:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Propiedades de fuente<\/li>\n\n\n\n<li>Propiedades de color<\/li>\n\n\n\n<li>Propiedades de color de fondo<\/li>\n\n\n\n<li>Propiedades de margen<\/li>\n\n\n\n<li>Propiedades de padding<\/li>\n\n\n\n<li>Propiedades de border<\/li>\n\n\n\n<li>text-decoration<\/li>\n\n\n\n<li>vertical-align (s\u00f3lo si <strong><em>float<\/em><\/strong> tiene el valor\u00a0<strong><em>none<\/em><\/strong>)<\/li>\n\n\n\n<li>text-transform<\/li>\n\n\n\n<li>line-height<\/li>\n\n\n\n<li>float<\/li>\n\n\n\n<li>clear<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Pseudo-elementos y clases<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Los pseudo-elementos se pueden utilizar junto a clases HTML.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">p.intro::first-letter {\n&nbsp;&nbsp;color: #ff0000;\n&nbsp; font-size: 200%;\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">M\u00faltiples pseudo-elementos<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">M\u00faltiples <strong>pseudo-elementos<\/strong> pueden ser combinados. En el siguiente ejm, la primera letra de un p\u00e1rrafo ser\u00e1 en rojo y con un tama\u00f1o xx-large. El resto de la linea ser\u00e1 azul y con <strong><em>font-variant: small-caps<\/em><\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">p::first-letter {\n&nbsp;&nbsp;color: #ff0000;\n&nbsp;&nbsp;font-size: xx-large;\n}\n\np::first-line {\n&nbsp; color: #0000ff;\n&nbsp; font-variant: small-caps;\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">El pseudo-elemento ::before<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Puede ser usado para insertar texto antes del contenido de un elemento.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">h1::after {\n&nbsp;&nbsp;content: url(smiley.gif);\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">El pseudo-elemento ::marker<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">El pseudo-elemento ::<strong><em>marker<\/em><\/strong> selecciona los marcadores de los elementos de la lista.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">::marker { \n&nbsp;&nbsp;color: red;\n&nbsp; font-size: 23px;\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">El pseudo-elemento ::selection<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">El pseudoelemento ::<strong><em>selection<\/em><\/strong> coincide con la parte de un elemento que selecciona un usuario.&nbsp;Las siguientes propiedades CSS se pueden aplicar a ::<strong><em>selection<\/em><\/strong>: color, background, cursor y outline.&nbsp;El siguiente ejemplo hace que el texto seleccionado sea rojo sobre un fondo amarillo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">::selection {\n&nbsp;&nbsp;color: red; \n&nbsp; background: yellow;\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Resumen<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><th>Selector<\/th><th>Ejemplo<\/th><th>Descripci\u00f3n del ejemplo<\/th><\/tr><tr><td><strong><em>::after<\/em><\/strong><\/td><td><strong><em>p::after<\/em><\/strong><\/td><td>Inserta algo despu\u00e9s del contenido de cada elemento <strong><em>&lt;p&gt;<\/em><\/strong><\/td><\/tr><tr><td><strong><em>::before<\/em><\/strong><\/td><td><strong><em>p::before<\/em><\/strong><\/td><td>Inserta algo antes del contenido de cada elemento <strong><em>&lt;p&gt;<\/em><\/strong><\/td><\/tr><tr><td><strong><em>::first-letter<\/em><\/strong><\/td><td><strong><em>p::first-letter<\/em><\/strong><\/td><td>Selecciona la primera letra de cada elemento <strong><em>&lt;p&gt;<\/em><\/strong><\/td><\/tr><tr><td><strong><em>::first-line<\/em><\/strong><\/td><td><strong><em>p::first-line<\/em><\/strong><\/td><td>Selecciona la primera l\u00ednea de cada elemento <strong><em>&lt;p&gt;<\/em><\/strong><\/td><\/tr><tr><td><strong><em>::marker<\/em><\/strong><\/td><td><strong><em>::marker<\/em><\/strong><\/td><td>Selecciona los marcadores de los elementos de la lista.<\/td><\/tr><tr><td><strong><em>::selection<\/em><\/strong><\/td><td><strong><em>p::selection<\/em><\/strong><\/td><td>Selecciona la parte de un elemento que es seleccionado por un usuario<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Qu\u00e9 son los pseudo-elementos? Un pseudo-elemento CSS es usado para dotar de un estilo espec\u00edfico a parte de un elemento. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":563,"menu_order":39,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1320","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Qu\u00e9 son los pseudo-elementos? Un pseudo-elemento CSS es usado para dotar de un estilo espec\u00edfico a parte de un elemento. [&hellip;]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1320","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1320"}],"version-history":[{"count":3,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1320\/revisions"}],"predecessor-version":[{"id":1323,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1320\/revisions\/1323"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/563"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1320"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}