{"id":692,"date":"2020-07-03T21:37:47","date_gmt":"2020-07-04T00:37:47","guid":{"rendered":"https:\/\/www.joemaster.com.br\/tutoriais\/?p=692"},"modified":"2020-07-03T21:37:47","modified_gmt":"2020-07-04T00:37:47","slug":"pseudo-elementos-css","status":"publish","type":"post","link":"https:\/\/www.joemaster.com.br\/tutoriais\/pseudo-elementos-css\/","title":{"rendered":"Pseudo elementos CSS"},"content":{"rendered":"

Um pseudo elemento CSS \u00e9 usado para estilizar partes especificadas de um elemento.<\/p>\n

Por exemplo, ele pode ser usado para:<\/p>\n

Estilize a primeira letra ou linha de um elemento
\nInserir conte\u00fado antes ou depois do conte\u00fado de um elemento
\nSintaxe<\/p>\n

A sintaxe dos pseudo elementos:<\/strong><\/p>\n

selector::pseudo-element {<\/code>
\nproperty: value;<\/code>
\n}<\/code><\/p>\n

O pseudo-elemento :: first-line<\/h2>\n

O\u00a0::first-line<\/code>pseudoelemento \u00e9 usado para adicionar um estilo especial \u00e0 primeira linha de um texto.<\/p>\n

O exemplo a seguir formata a primeira linha do texto em todos os elementos <p>:<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\np::first-line {\r\n  color: #ff0000;\r\n  font-variant: small-caps;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<p>You can use the ::first-line pseudo-element to add a special effect to the first line of a text. Some more text. And even more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
Pseudoelementos m\u00faltiplos<\/span><\/h2>\n
V\u00e1rios pseudoelementos tamb\u00e9m podem ser combinados.<\/span><\/p>\n
No exemplo a seguir, a primeira letra de um par\u00e1grafo ser\u00e1 vermelha, em um tamanho de fonte xx-grande.\u00a0O restante da primeira linha ser\u00e1 azul e em letras min\u00fasculas.\u00a0O restante do par\u00e1grafo ter\u00e1 o tamanho e a cor padr\u00e3o da fonte:<\/span><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\np::first-letter {\r\n  color: #ff0000;\r\n  font-size: xx-large;\r\n}\r\n\r\np::first-line {\r\n  color: #0000ff;\r\n  font-variant: small-caps;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<p>You can combine the ::first-letter and ::first-line pseudo-elements to add a special effect to the first letter and the first line of a text!<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
 <\/p>\n
CSS – O pseudo-elemento :: after ou :: before<\/strong><\/p>\n
O ::afterpseudoelemento pode ser usado para inserir algum conte\u00fado ap\u00f3s o conte\u00fado de um elemento.<\/p>\n
O exemplo a seguir insere uma imagem ap\u00f3s o conte\u00fado de cada elemento <h1>:<\/p>\n
 <\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nh1::after {\r\n  content: url(https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/06\/favicon.jpg);\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h1>This is a heading<\/h1>\r\n<p>The ::after pseudo-element inserts content after the content of an element.<\/p>\r\n\r\n<h1>This is a heading<\/h1>\r\n<p><b>Note:<\/b> IE8 supports the content property only if a !DOCTYPE is specified.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
 <\/p>\n
\n  Ap\u00f3s clicar em Copy ⇗
O código fica pronto para testar ou colar onde quiser no  CTRL+V<\/font>\n