Utiliser les Pseudo-\u00e9l\u00e9ments en CSS<\/title>\n <meta name=\"description\" content=\"Apprenez \u00e0 utiliser les pseudo-\u00e9l\u00e9ments en CSS pour rendre vos interfaces web plus interactives et engageantes gr\u00e2ce \u00e0 ces exemples pratiques.\">\n <link rel=\"stylesheet\" href=\"styles.css\">\n<\/head>\n\n<body>\n\n \n <p><strong>Utiliser les Pseudo-\u00e9l\u00e9ments en CSS<\/strong> est une comp\u00e9tence essentielle pour affiner et personnaliser vos interfaces web. Comprendre comment appliquer et ma\u00eetriser les pseudo-\u00e9l\u00e9ments peut transformer vos designs, rendant votre site plus interactif et engageant. Apprenons ensemble comment utiliser cette puissante fonctionnalit\u00e9 CSS avec des exemples pratiques et concrets.<\/p>\n \n\n \n <h2 class=\"wp-block-heading\">Introduction aux <strong>Pseudo-\u00e9l\u00e9ments en CSS<\/strong><\/h2>\n \n\n \n <div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n <iframe src=\"https:\/\/player.vimeo.com\/video\/586640573?dnt=1&fullscreen=0&pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n \n \n <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n <\/div>\n\n \n <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n <\/div>\n <\/div>\n\n <script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n <script>\n document.addEventListener('DOMContentLoaded', function() {\n var iframe = document.getElementById('vimeoPlayer');\n var player = new Vimeo.Player(iframe);\n var isPopupDisplayed = false;\n\n player.on('play', function() {\n if (!isPopupDisplayed) {\n player.on('timeupdate', function(data) {\n if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n \/\/ Pause the video and display the popup\n player.pause().then(function() {\n if (window.innerWidth > 768) {\n document.querySelector('.desktop-popup').style.display = 'block';\n } else {\n document.querySelector('.mobile-popup').style.display = 'block';\n }\n fetchPriceAndUpdatePopup();\n isPopupDisplayed = true;\n });\n }\n });\n }\n });\n\n function fetchPriceAndUpdatePopup() {\n fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n .then(response => response.text())\n .then(html => {\n var parser = new DOMParser();\n var fetchedDoc = parser.parseFromString(html, 'text\/html');\n var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n document.getElementById('price').textContent = price;\n document.getElementById('priceMobile').textContent = price;\n document.querySelector('.desktop-popup del').textContent = originalPrice;\n document.querySelector('.mobile-popup del').textContent = originalPrice;\n })\n .catch(error => console.error('Error fetching the price:', error));\n }\n\n function closePopup() {\n document.querySelector('.desktop-popup').style.display = 'none';\n document.querySelector('.mobile-popup').style.display = 'none';\n player.play(); \/\/ Allows resuming the video only after closing the popup\n }\n });\n <\/script>\n \n\n \n <p>Les pseudo-\u00e9l\u00e9ments en CSS permettent d’ajouter un style sp\u00e9cifique \u00e0 des parties d’un \u00e9l\u00e9ment sans avoir besoin d’ajouter du HTML suppl\u00e9mentaire. Ces \u00e9l\u00e9ments virtuels sont sp\u00e9cifi\u00e9s par des s\u00e9lecteurs CSS et sont particuli\u00e8rement utiles pour introduire des styles avant ou apr\u00e8s le contenu d’un \u00e9l\u00e9ment, ou pour cibler des parties sp\u00e9cifiques de ce contenu. Les deux pseudo-\u00e9l\u00e9ments les plus courants sont <code>::before<\/code> et <code>::after<\/code>.<\/p>\n \n\n \n <h3 class=\"wp-block-heading\">Les Bases des Pseudo-\u00e9l\u00e9ments : <code>::before<\/code> et <code>::after<\/code><\/h3>\n \n\n \n <p>Les pseudo-\u00e9l\u00e9ments <code>::before<\/code> et <code>::after<\/code> sont utilis\u00e9s pour ins\u00e9rer du contenu avant ou apr\u00e8s le contenu d’un \u00e9l\u00e9ment respectif. Cela est souvent utilis\u00e9 pour ajouter des embellissements et des d\u00e9corations automatiques.<\/p>\n \n\n \n <pre class=\"wp-block-code lang-css\"><code>\/* Ajout d'un contenu avant l'\u00e9l\u00e9ment *\/\np::before {\n content: \"Note: \";\n color: red;\n}\n\n\/* Ajout d'un contenu apr\u00e8s l'\u00e9l\u00e9ment *\/\np::after {\n content: \" ~fin~ \";\n color: blue;\n}<\/code><\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">Cr\u00e9er des Effets Visuels Avanc\u00e9s avec <code>::before<\/code> et <code>::after<\/code><\/h3>\n \n\n \n <p>Les pseudo-\u00e9l\u00e9ments peuvent \u00e9galement \u00eatre utilis\u00e9s pour cr\u00e9er des effets visuels avanc\u00e9s comme ajouter des ic\u00f4nes, des surlignages stylis\u00e9s, ou m\u00eame des animations. Voici un exemple simple o\u00f9 nous ajoutons un petit encadr\u00e9 color\u00e9 avant un titre :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-css\"><code>h1::before {\n content: \"\";\n display: inline-block;\n width: 10px;\n height: 10px;\n background-color: #3498db;\n margin-right: 10px;\n}<\/code><\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">Utiliser les Pseudo-\u00e9l\u00e9ments pour Cr\u00e9er des Listes Stylis\u00e9es<\/h3>\n \n\n \n <p>Les pseudo-\u00e9l\u00e9ments sont particuli\u00e8rement efficaces pour styliser des listes sans modifier le HTML. Par exemple, vous pouvez remplacer les puces de liste par des ic\u00f4nes personnalis\u00e9es :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-css\"><code>ul li::before {\n content: \"\u2714\";\n color: green;\n margin-right: 8px;\n}<\/code><\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">Animer les Pseudo-\u00e9l\u00e9ments pour des Effets Dynamiques<\/h3>\n \n\n \n <p>Les pseudo-\u00e9l\u00e9ments peuvent \u00eatre anim\u00e9s pour cr\u00e9er des effets interactifs et dynamiques. Par exemple, en utilisant @keyframes et diff\u00e9rentes propri\u00e9t\u00e9s CSS, vous pouvez faire virevolter un contenu avant ou apr\u00e8s un \u00e9l\u00e9ment :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-css\"><code>@keyframes spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n.button::before {\n content: \"\";\n display: inline-block;\n width: 16px;\n height: 16px;\n background-color: red;\n margin-right: 8px;\n animation: spin 2s linear infinite;\n}<\/code><\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">Utiliser d’autres Pseudo-\u00e9l\u00e9ments : <code>::first-line<\/code> et <code>::first-letter<\/code><\/h3>\n \n\n \n <p>En plus de <code>::before<\/code> et <code>::after<\/code>, CSS offre d’autres pseudo-\u00e9l\u00e9ments qui permettent de cibler de mani\u00e8re pr\u00e9cise le d\u00e9but du contenu des \u00e9l\u00e9ments :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-css\"><code>\/* Styliser la premi\u00e8re ligne d'un paragraphe *\/\np::first-line {\n font-weight: bold;\n color: #2c3e50;\n}\n\n\/* Styliser la premi\u00e8re lettre d'un paragraphe *\/\np::first-letter {\n font-size: 2em;\n color: #e74c3c;\n}<\/code><\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s d’Utilisation des Pseudo-\u00e9l\u00e9ments<\/h3>\n \n\n \n <p>Pour approfondir notre compr\u00e9hension, voici quelques exemples plus avanc\u00e9s sur la mani\u00e8re d’utiliser les pseudo-\u00e9l\u00e9ments dans des sc\u00e9narios r\u00e9els :<\/p>\n \n\n \n <h4 class=\"wp-block-heading\">Cr\u00e9er un Badge de Notification<\/h4>\n \n\n \n <p>Ajoutez un badge de notification \u00e0 un \u00e9l\u00e9ment en utilisant le pseudo-\u00e9l\u00e9ment <code>::after<\/code> :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-css\"><code>.notification {\n position: relative;\n}\n\n.notification::after {\n content: \"3\";\n position: absolute;\n top: -5px;\n right: -10px;\n background-color: red;\n color: white;\n border-radius: 50%;\n width: 20px;\n height: 20px;\n text-align: center;\n line-height: 20px;\n}<\/code><\/pre>\n \n\n \n <h4 class=\"wp-block-heading\">Cr\u00e9er un effet de surlignage stylis\u00e9<\/h4>\n \n\n \n <p>Utilisez les pseudo-\u00e9l\u00e9ments pour cr\u00e9er un effet de surlignage stylis\u00e9 sur le texte :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-css\"><code>a {\n color: black;\n text-decoration: none;\n position: relative;\n}\n\na::before {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 3px;\n bottom: 0;\n left: 0;\n background-color: yellow;\n visibility: hidden;\n transform: scaleX(0);\n transition: all 0.3s ease-in-out;\n}\n\na:hover::before {\n visibility: visible;\n transform: scaleX(1);\n}<\/code><\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">Utiliser les Pseudo-\u00e9l\u00e9ments pour des Formulaires HTML<\/h3>\n \n\n \n <p>Les pseudo-\u00e9l\u00e9ments en CSS peuvent \u00e9galement am\u00e9liorer la pr\u00e9sentation des <a href=\"https:\/\/wikiform.fr\/codespace\/formulaires-html-guide-pratique\">formulaires HTML<\/a>. En utilisant <code>::before<\/code> et <code>::after<\/code>, vous pouvez ajouter des indicateurs visuels pour les champs obligatoires:<\/p>\n \n\n \n <pre class=\"wp-block-code lang-css\"><code>input:required::before {\n content: \"*\";\n color: red;\n margin-right: 4px;\n}<\/code><\/pre>\n \n\n \n <p>Pour les divers autres composants de formulaire, comme les boutons de soumission, vous pouvez utiliser des pseudos-\u00e9l\u00e9ments pour ajouter des contextes visuels imbriqu\u00e9s, am\u00e9liorant ainsi l’exp\u00e9rience utilisateur. Pour en savoir plus sur la conception de formulaires HTML, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/rediger-css-pages-html-guide\">guide CSS pour les formulaires HTML<\/a>.<\/p>\n \n\n \n <h3 class=\"wp-block-heading\">Conclusion<\/h3>\n \n\n \n <p>Les <strong>pseudo-\u00e9l\u00e9ments en CSS<\/strong> sont de puissants outils pour am\u00e9liorer le style et l’interaction de vos pages web sans ajouter de balises suppl\u00e9mentaires dans le HTML. Que vous souhaitiez ajouter du contenu, cr\u00e9er des animations, ou styliser des parties sp\u00e9cifiques de vos \u00e9l\u00e9ments, les pseudo-\u00e9l\u00e9ments offrent des solutions \u00e9l\u00e9gantes et efficaces. Continuez \u00e0 explorer et exp\u00e9rimenter avec ces techniques pour d\u00e9velopper des interfaces encore plus attrayantes et engageantes.<\/p>\n \n\n \n <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" rel=\"noopener\">\n <img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-HTML-ET-CSS-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation HTML et CSS Offre 50%\" title=\"\">\n <\/a>\n \n\n<\/body>\n\n<\/html>","protected":false},"excerpt":{"rendered":"<p>Utiliser les Pseudo-\u00e9l\u00e9ments en CSS Utiliser les Pseudo-\u00e9l\u00e9ments en CSS est une comp\u00e9tence essentielle pour affiner et personnaliser vos interfaces web. Comprendre comment appliquer et…<\/p>\n","protected":false},"author":2,"featured_media":2791,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5383","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3-css","category-2-html","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5383","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5383"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5383\/revisions"}],"predecessor-version":[{"id":5384,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5383\/revisions\/5384"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2791"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5383"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5383"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5383"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":5383,"date":"2024-08-27T17:36:54","date_gmt":"2024-08-27T17:36:54","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/utiliser-pseudo-elements-css-guide\/"},"modified":"2024-08-27T17:36:57","modified_gmt":"2024-08-27T17:36:57","slug":"utiliser-pseudo-elements-css-guide","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/utiliser-pseudo-elements-css-guide\/","title":{"rendered":"6.3 Utiliser les Pseudo-\u00e9l\u00e9ments en CSS : Guide Complet"},"content":{"rendered":"\n\n\n\n \n \n Utiliser les Pseudo-\u00e9l\u00e9ments en CSS<\/title>\n <meta name=\"description\" content=\"Apprenez \u00e0 utiliser les pseudo-\u00e9l\u00e9ments en CSS pour rendre vos interfaces web plus interactives et engageantes gr\u00e2ce \u00e0 ces exemples pratiques.\">\n <link rel=\"stylesheet\" href=\"styles.css\">\n<\/head>\n\n<body>\n\n \n <p><strong>Utiliser les Pseudo-\u00e9l\u00e9ments en CSS<\/strong> est une comp\u00e9tence essentielle pour affiner et personnaliser vos interfaces web. Comprendre comment appliquer et ma\u00eetriser les pseudo-\u00e9l\u00e9ments peut transformer vos designs, rendant votre site plus interactif et engageant. Apprenons ensemble comment utiliser cette puissante fonctionnalit\u00e9 CSS avec des exemples pratiques et concrets.<\/p>\n \n\n \n <h2 class=\"wp-block-heading\">Introduction aux <strong>Pseudo-\u00e9l\u00e9ments en CSS<\/strong><\/h2>\n \n\n \n <div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n <iframe src=\"https:\/\/player.vimeo.com\/video\/586640573?dnt=1&fullscreen=0&pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n \n \n <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n <\/div>\n\n \n <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n <\/div>\n <\/div>\n\n <script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n <script>\n document.addEventListener('DOMContentLoaded', function() {\n var iframe = document.getElementById('vimeoPlayer');\n var player = new Vimeo.Player(iframe);\n var isPopupDisplayed = false;\n\n player.on('play', function() {\n if (!isPopupDisplayed) {\n player.on('timeupdate', function(data) {\n if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n \/\/ Pause the video and display the popup\n player.pause().then(function() {\n if (window.innerWidth > 768) {\n document.querySelector('.desktop-popup').style.display = 'block';\n } else {\n document.querySelector('.mobile-popup').style.display = 'block';\n }\n fetchPriceAndUpdatePopup();\n isPopupDisplayed = true;\n });\n }\n });\n }\n });\n\n function fetchPriceAndUpdatePopup() {\n fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n .then(response => response.text())\n .then(html => {\n var parser = new DOMParser();\n var fetchedDoc = parser.parseFromString(html, 'text\/html');\n var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n document.getElementById('price').textContent = price;\n document.getElementById('priceMobile').textContent = price;\n document.querySelector('.desktop-popup del').textContent = originalPrice;\n document.querySelector('.mobile-popup del').textContent = originalPrice;\n })\n .catch(error => console.error('Error fetching the price:', error));\n }\n\n function closePopup() {\n document.querySelector('.desktop-popup').style.display = 'none';\n document.querySelector('.mobile-popup').style.display = 'none';\n player.play(); \/\/ Allows resuming the video only after closing the popup\n }\n });\n <\/script>\n \n\n \n <p>Les pseudo-\u00e9l\u00e9ments en CSS permettent d’ajouter un style sp\u00e9cifique \u00e0 des parties d’un \u00e9l\u00e9ment sans avoir besoin d’ajouter du HTML suppl\u00e9mentaire. Ces \u00e9l\u00e9ments virtuels sont sp\u00e9cifi\u00e9s par des s\u00e9lecteurs CSS et sont particuli\u00e8rement utiles pour introduire des styles avant ou apr\u00e8s le contenu d’un \u00e9l\u00e9ment, ou pour cibler des parties sp\u00e9cifiques de ce contenu. Les deux pseudo-\u00e9l\u00e9ments les plus courants sont <code>::before<\/code> et <code>::after<\/code>.<\/p>\n \n\n \n <h3 class=\"wp-block-heading\">Les Bases des Pseudo-\u00e9l\u00e9ments : <code>::before<\/code> et <code>::after<\/code><\/h3>\n \n\n \n <p>Les pseudo-\u00e9l\u00e9ments <code>::before<\/code> et <code>::after<\/code> sont utilis\u00e9s pour ins\u00e9rer du contenu avant ou apr\u00e8s le contenu d’un \u00e9l\u00e9ment respectif. Cela est souvent utilis\u00e9 pour ajouter des embellissements et des d\u00e9corations automatiques.<\/p>\n \n\n \n <pre class=\"wp-block-code lang-css\"><code>\/* Ajout d'un contenu avant l'\u00e9l\u00e9ment *\/\np::before {\n content: \"Note: \";\n color: red;\n}\n\n\/* Ajout d'un contenu apr\u00e8s l'\u00e9l\u00e9ment *\/\np::after {\n content: \" ~fin~ \";\n color: blue;\n}<\/code><\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">Cr\u00e9er des Effets Visuels Avanc\u00e9s avec <code>::before<\/code> et <code>::after<\/code><\/h3>\n \n\n \n <p>Les pseudo-\u00e9l\u00e9ments peuvent \u00e9galement \u00eatre utilis\u00e9s pour cr\u00e9er des effets visuels avanc\u00e9s comme ajouter des ic\u00f4nes, des surlignages stylis\u00e9s, ou m\u00eame des animations. Voici un exemple simple o\u00f9 nous ajoutons un petit encadr\u00e9 color\u00e9 avant un titre :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-css\"><code>h1::before {\n content: \"\";\n display: inline-block;\n width: 10px;\n height: 10px;\n background-color: #3498db;\n margin-right: 10px;\n}<\/code><\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">Utiliser les Pseudo-\u00e9l\u00e9ments pour Cr\u00e9er des Listes Stylis\u00e9es<\/h3>\n \n\n \n <p>Les pseudo-\u00e9l\u00e9ments sont particuli\u00e8rement efficaces pour styliser des listes sans modifier le HTML. Par exemple, vous pouvez remplacer les puces de liste par des ic\u00f4nes personnalis\u00e9es :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-css\"><code>ul li::before {\n content: \"\u2714\";\n color: green;\n margin-right: 8px;\n}<\/code><\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">Animer les Pseudo-\u00e9l\u00e9ments pour des Effets Dynamiques<\/h3>\n \n\n \n <p>Les pseudo-\u00e9l\u00e9ments peuvent \u00eatre anim\u00e9s pour cr\u00e9er des effets interactifs et dynamiques. Par exemple, en utilisant @keyframes et diff\u00e9rentes propri\u00e9t\u00e9s CSS, vous pouvez faire virevolter un contenu avant ou apr\u00e8s un \u00e9l\u00e9ment :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-css\"><code>@keyframes spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n.button::before {\n content: \"\";\n display: inline-block;\n width: 16px;\n height: 16px;\n background-color: red;\n margin-right: 8px;\n animation: spin 2s linear infinite;\n}<\/code><\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">Utiliser d’autres Pseudo-\u00e9l\u00e9ments : <code>::first-line<\/code> et <code>::first-letter<\/code><\/h3>\n \n\n \n <p>En plus de <code>::before<\/code> et <code>::after<\/code>, CSS offre d’autres pseudo-\u00e9l\u00e9ments qui permettent de cibler de mani\u00e8re pr\u00e9cise le d\u00e9but du contenu des \u00e9l\u00e9ments :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-css\"><code>\/* Styliser la premi\u00e8re ligne d'un paragraphe *\/\np::first-line {\n font-weight: bold;\n color: #2c3e50;\n}\n\n\/* Styliser la premi\u00e8re lettre d'un paragraphe *\/\np::first-letter {\n font-size: 2em;\n color: #e74c3c;\n}<\/code><\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s d’Utilisation des Pseudo-\u00e9l\u00e9ments<\/h3>\n \n\n \n <p>Pour approfondir notre compr\u00e9hension, voici quelques exemples plus avanc\u00e9s sur la mani\u00e8re d’utiliser les pseudo-\u00e9l\u00e9ments dans des sc\u00e9narios r\u00e9els :<\/p>\n \n\n \n <h4 class=\"wp-block-heading\">Cr\u00e9er un Badge de Notification<\/h4>\n \n\n \n <p>Ajoutez un badge de notification \u00e0 un \u00e9l\u00e9ment en utilisant le pseudo-\u00e9l\u00e9ment <code>::after<\/code> :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-css\"><code>.notification {\n position: relative;\n}\n\n.notification::after {\n content: \"3\";\n position: absolute;\n top: -5px;\n right: -10px;\n background-color: red;\n color: white;\n border-radius: 50%;\n width: 20px;\n height: 20px;\n text-align: center;\n line-height: 20px;\n}<\/code><\/pre>\n \n\n \n <h4 class=\"wp-block-heading\">Cr\u00e9er un effet de surlignage stylis\u00e9<\/h4>\n \n\n \n <p>Utilisez les pseudo-\u00e9l\u00e9ments pour cr\u00e9er un effet de surlignage stylis\u00e9 sur le texte :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-css\"><code>a {\n color: black;\n text-decoration: none;\n position: relative;\n}\n\na::before {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 3px;\n bottom: 0;\n left: 0;\n background-color: yellow;\n visibility: hidden;\n transform: scaleX(0);\n transition: all 0.3s ease-in-out;\n}\n\na:hover::before {\n visibility: visible;\n transform: scaleX(1);\n}<\/code><\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">Utiliser les Pseudo-\u00e9l\u00e9ments pour des Formulaires HTML<\/h3>\n \n\n \n <p>Les pseudo-\u00e9l\u00e9ments en CSS peuvent \u00e9galement am\u00e9liorer la pr\u00e9sentation des <a href=\"https:\/\/wikiform.fr\/codespace\/formulaires-html-guide-pratique\">formulaires HTML<\/a>. En utilisant <code>::before<\/code> et <code>::after<\/code>, vous pouvez ajouter des indicateurs visuels pour les champs obligatoires:<\/p>\n \n\n \n <pre class=\"wp-block-code lang-css\"><code>input:required::before {\n content: \"*\";\n color: red;\n margin-right: 4px;\n}<\/code><\/pre>\n \n\n \n <p>Pour les divers autres composants de formulaire, comme les boutons de soumission, vous pouvez utiliser des pseudos-\u00e9l\u00e9ments pour ajouter des contextes visuels imbriqu\u00e9s, am\u00e9liorant ainsi l’exp\u00e9rience utilisateur. Pour en savoir plus sur la conception de formulaires HTML, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/rediger-css-pages-html-guide\">guide CSS pour les formulaires HTML<\/a>.<\/p>\n \n\n \n <h3 class=\"wp-block-heading\">Conclusion<\/h3>\n \n\n \n <p>Les <strong>pseudo-\u00e9l\u00e9ments en CSS<\/strong> sont de puissants outils pour am\u00e9liorer le style et l’interaction de vos pages web sans ajouter de balises suppl\u00e9mentaires dans le HTML. Que vous souhaitiez ajouter du contenu, cr\u00e9er des animations, ou styliser des parties sp\u00e9cifiques de vos \u00e9l\u00e9ments, les pseudo-\u00e9l\u00e9ments offrent des solutions \u00e9l\u00e9gantes et efficaces. Continuez \u00e0 explorer et exp\u00e9rimenter avec ces techniques pour d\u00e9velopper des interfaces encore plus attrayantes et engageantes.<\/p>\n \n\n \n <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" rel=\"noopener\">\n <img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-HTML-ET-CSS-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation HTML et CSS Offre 50%\" title=\"\">\n <\/a>\n \n\n<\/body>\n\n<\/html>","protected":false},"excerpt":{"rendered":"<p>Utiliser les Pseudo-\u00e9l\u00e9ments en CSS Utiliser les Pseudo-\u00e9l\u00e9ments en CSS est une comp\u00e9tence essentielle pour affiner et personnaliser vos interfaces web. Comprendre comment appliquer et…<\/p>\n","protected":false},"author":2,"featured_media":2791,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5383","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3-css","category-2-html","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5383","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5383"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5383\/revisions"}],"predecessor-version":[{"id":5384,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5383\/revisions\/5384"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2791"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5383"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5383"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5383"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}