Javascript Css Après

| | | | | | | | | | | | | | | | | | | | | | | | | | | | |

Le CSS :: avant le contenu de la sélection s`insère avant un élément sélectionné. CSS : après le contenu des insertions après un élément spécifié. Ces sélecteurs sont couramment utilisés pour ajouter du texte avant ou après un paragraphe ou un lien.

Lors de la conception d`un site Web, vous pouvez ajouter du contenu avant ou après le contenu d`une page. élément. Par exemple, vous pouvez ajouter une image avant chaque puce d`une liste.

C`est là que : : avant et après : : les éléments pseudo-CSS entrent en jeu. Ces pseudo-éléments vous permettent d`insérer du contenu avant ou après le contenu d`un élément.

Ce didacticiel explique, à l`aide d`exemples, comment utiliser les pseudo-éléments ::before et after:: pour décorer le contenu d`une page Web. Lorsque vous aurez fini de lire ce didacticiel, vous serez un expert dans l`utilisation de :: avant et après :: pseudo-éléments en CSS.

Pseudo-éléments CSS

Un pseudo- element est un mot-clé spécial qui vous permet de styliser une partie spécifique des éléments sélectionnés par un sélecteur CSS. Dans cet article, nous appellerons les pseudo-éléments des sélecteurs car chaque pseudo-élément est un sélecteur

Les pseudo-éléments sont utiles lorsque vous souhaitez styliser un élément sans ajouter ID CSS ou classes à l`élément. Par exemple, si vous souhaitez ajouter une flèche ">" après chaque lien sur une page Web, vous pouvez utiliser un pseudo-élément.

CSS propose une large gamme de pseudo-éléments. En particulier :: première ligne, :: première lettre, :: avant et après ::. Pour les besoins de ce didacticiel, nous nous concentrerons sur les deux derniers : : : : : avant et après.

Les pseudo-éléments sont généralement représentés à l`aide de deux-points (: :). Bien que CSS3 prenne en charge l`utilisation de la syntaxe à point unique (:) pour déclarer un pseudo-élément, l`utilisation de la notation deux-points est la meilleure pratique

C`est parce que le la notation deux-points est utilisée pour distinguer les espaces réservés de la pseudo-classe.

CSS : : avant l`élément pseudo-élément

Il : : avant le pseudo-l "ajoute le contenu qui apparaît avant un élément sur une page Web Cet élément est souvent utilisé pour ajouter du texte avant un paragraphe

la syntaxe de :: avant le pseudo-élément est : ..

Le :: avant selector est ajouté après le nom de l`élément auquel vous souhaitez appliquer le sélecteur

Voici les principaux composants du front :: pseudo-élément :

Si vous souhaitez en savoir plus sur le fonctionnement des sélecteurs en CSS, lisez notre guide CSS Selectors .

Prenons un exemple pour montrer comment fonctionne le :: avant le pseudo-élément.

Supposons que nous souhaitions ajouter un lien emoji (Ôîó) avant chaque lien dans un exemple de page Web. Nous pourrions le faire en utilisant le code suivant :

Notre code renvoie :

Capture d`écran à partir du 12 09 08 00 16 2020

Nous avons fait cela en spécifiant une propriété de contenu dans notre fichier CSS, qui ressemble à ceci :

contenu : "Ôîó" ;

Notre règle a ajouté un lien emoji au début de notre balise que nous avons créée

la valeur de l`attribut "content" peut être :.

Vous ne pouvez pas insérer d`élément HTML dans l`attribut content.

le pseudo-élément CSS :: after

le pseudo-élément CSS :: after permet d`ajouter du contenu immédiatement après un élément sur une page Web. Tout comme le :: avant sélecteur, après :: est souvent utilisé avec des liens ou des paragraphes de texte.

Th La syntaxe de p seudo-element :: est après ce qui suit :

le : : après la syntaxe est la même que la syntaxe du pseudo-élément :: avant . :: accepte après les mêmes valeurs ‚Äã‚Äãpour l`attribut "content" dont nous avons parlé plus tôt

:: après l`exemple CSS

Supposons que vous conceviez un élément de lien sur un site pour une boulangerie appelée Hansons Bakery. Ce lien doit afficher le texte "Aller à la page Accueil Hansons Bakery. " Notre lien doit être entouré d`une bordure noire solide d`1 pixel de large.

Après notre étiquette, nous voulons un texte boîte à apparaître avec le contenu Cette page notre menu de produits de boulangerie . (Notez l`espace blanc avant le mot "Ceci".) Notre boîte doit avoir une couleur d`arrière-plan HTML orange .

Nous pourrions le faire en utilisant le code suivant :

Notre code a généré un contenu semblable à celui-ci :

< class figure = "wp-bloc-image"> Capture de 2020 12 09 08 00 47 1