Guillaume Deschamps
Artiste 3D

Les pouvoirs des pseudo-éléments ::before et ::after

Vous les avez surement déjà vu plusieurs fois dans votre expèrience dans le développement front-end, sans vraiment connaître toutes les possibilités qu'ils offrent. Et il y en a ! Mais attention, on utilise dans des intentions purement décoratives. Évitez de vouloir gérer du contenu important avec ces pseudos-éléments. Ce n'est que pour la déco !

Il existe de nombreux autres pseudo-éléments. En voici la liste, ici. Dans cet article, nous allons nous interesser qu'à ces deux derniers :
::before
::after

Pour commencer, un pseudo-élément dépend toujours d'un élément préalable (nan mais sans dèc..!) :
ELEMENT ::after{...}

Exemple :
a::before{...}
.maClasse::after{...}
#monId::before{...}

Lors du passage en CSS3, on a voulu distinguer les pseudo-classes ":hover", "first-child", etc... des pseudos-éléments. La notation diffère donc selon la version css. Mais jusqu'à présent, les navigateurs s'en fichent. Vous pouvez toujours ecrire ":after".

- CSS 3 ::before
- CSS 2 :before

Mais concretement, qu'est-ce qu'on peut faire avec ?

Des animations interactives "whouahou"

Vous pouvez réaliser des animations interactives élaborées, comme des dégradés au survol d'un bloc ou d'une image.
Par exemple : https://bryanlrobinson.com/blog/how-to-css-after-elements-for-background-overlays/

Enrichir l'affichage des liens avec un icone

Vous pouvez personnaliser l'affichage des liens de votre site à l'aide d'un icone. Par exemple, afficher l'icone "PDF" au début de tous les liens de votre projet web pointant sur des fichier dont l'extension est ".pdf"

a[href$=".pdf"]::after {    
  content: " (pdf)";    
  font-size:  .8em;    
  color: tomato;
}
https://css-tricks.com/almanac/selectors/a/after-and-before/

https://la-cascade.io/les-pseudo-elements-css-before-et-after/

https://css-tricks.com/css-content/
https://css-tricks.com/pseudo-element-roundup/
Liens

Liens

https://bryanlrobinson.com/blog/top-3-uses-of-after-and-before-css-pseudo-elements/

https://krasimirtsonev.com/blog/article/CSS-before-and-after-pseudo-elements-in-practice

Au sujet de MySQL

WORDPRESS ET MYSQL

https://dfarnier.fr/wordpress-et-mysql/ Système de Gestion de Bases de Données Relationnelles SGBDR Accéder à PHPmyAdmin http://localhost:8888/MAMP 127.0.0.1  

Pour lancer mysql en ligne de commande

mysql -h localhost -u root -p  

Si mon serveur est sur l’ordi

mysql -u root -p

écrire des commentaires

#  ou  --

\n

retour à la ligne

\t

tabulation

\

antislash (eh oui, il faut échapper le caractère d'échappement…)

%

pourcent (vous verrez pourquoi plus tard)

_

souligné (vous verrez pourquoi plus tard aussi)

Les types

nombre entiers

nombre décimaux

TYPE PARAMETRES DESCRIPTION OCTETS
DECIMAL nombres stockés sous forme de chaînes de caractères, en valeur exacte DECIMAL(précision,échelle) DECIMAL(5,2) déclare une colonne qui prend au moins 5 chiffres, mais deux strictement 2 après la virgule
NUMERIC nombres stockés sous forme de chaînes de caractères, en valeur exacte NUMERIC(précision,échelle) NUMERIC(5,2) déclare une colonne qui prend strictement 5 chiffres, dont 2 après la virgule
FLOAT valeur approchée pas de paramètre ex : - FLOAT(7,4) -> -999.9999 insert 999.00009 into a FLOAT(7,4) -> 999.0001 4
REAL valeur approchée pas de paramètre 8
DOUBLE valeur approchée pas de paramètre 8
DECIMAL et NUMERIQUE offrent de la précision, contrairement aux autres.

Texte

text court (255 caractères) - > CHAR ou VARCHAR CHAR(x) : stockera toujours x caractères, en remplissant si nécessaire le texte avec des espaces vides pour le compléter VARCHAR(X) : stockera jusqu'à x caractères (entre 0 et x), et stockera en plus en mémoire la taille du texte stocké. Un texte trop long sera tronqué. CF : https://chartio.com/resources/tutorials/understanding-strorage-sizes-for-mysql-text-data-types/
TYPE PARAMETRES DESCRIPTION OCTETS
TINYTEXT 255 characters 255 B can be used to store things like short summaries, URL links, and other shorter objects
TEXT 65,535 characters 64 KB typical long-form text content like article
MEDIUMTEXT 16,777,215 characters 16 MB white papers, books, and code backup
LONGTEXT 4,294,967,295 characters 4 GB for use in extreme text string storage use cases

Créer une base

mysql> CREATE DATABASE nom_base CHARACTER SET 'choix_encodage'; ex : CREATE DATABASE elevage CHARACTER SET 'utf8';

Utiliser une base

USE nom_base;

Supprimer une base

mysql> DROP DATABASE nom_base; mysql> SHOW TABLES; -- liste les tables de la base de données mysql> DESCRIBE Animal; -- liste les colonnes de la table avec leurs caractéristiques

Créer une table

CREATE TABLE [IF NOT EXISTS] Nom_table ( colonne1 description_colonne1, [colonne2 description_colonne2, colonne3 description_colonne3, ...,] [PRIMARY KEY (colonne_clé_primaire)] ) [ENGINE=moteur];

Pour remplacer une donnée dans une table de BDD

UPDATE table
SET nom_colonne = REPLACE(nom_colonne, 'ancien texte', 'texte de remplacement');