28234 sujets

CSS et mise en forme, CSS3

[Résolu] Repéter un élément plusieurs avec ::before

Comment je peux faire apparaitre trois éléments avec ::before ou ::after. Est-ce que c'est possible d'imbriquer maClasse::before::after::before pour faire apparaitre ces trois éléments ? en essayant ça ne marche pas Smiley lol je m'y prends peut-être mal 

#maClasse::before {
    color: #30bdea;
    content: "?";
    display: block;
    font-size: 4em;
    line-height: 0;
    position: relative;
    text-align: center;
    top: -9px;
    transform: rotate(45deg);
    z-index: 1;
}


upload/1501658974-48809-troisflechesbefore.jpg
Modifié par blond1n (02 Aug 2017 - 09:29)
Modérateur
Bonjour,


Et non... malheureusement un before et un after seulement. Sinon tu as la possibilité de déposer autant de div que tu veux dans le dom directement Smiley lol
J'ai fait ça finalement. Smiley cligne je pensais faire quelque chose de plus propre, sans mettre des <div> à tir larigot pour juste des petits triangles. En JavaScript ça se fait surement assez facilement, mais bon. . le css reste plus simple pour moi. Smiley smile
Modérateur
blond1n a écrit :


..le css plus simple que le JavaScript.. . Smiley biggol quoique Smiley smile Je vais regarder ça de plus près, merci ! Smiley cligne


C'est effectivement répétitif sans être complexe, une boucle en js pour injecter le css à la volée , faciliterait la tâche et permettrais aussi facilement de modifier les écart entre chaque ombre déportées.
La méthode 100% CSS ou la méthode balises injectées + class/style s'articuleraient sur une boucle pour en faire un script configurable.

En CSS ou CSS+HTML , il faut tout reprendre à mano, le javascript peut-être plus flexible.

Cdt.
Merci de tes précisions Smiley cligne Ne sachant pas programmer quoique ce soit sauf en bidouillant des choses simples, je vais rester du css. Dans mon cerveau je comprends le principe mais impossible de le mettre en pratique. Je n'ai pas appris les langages de programmations, je risque de passer pas mal de temps Smiley lol ne pas y arriver surtout ! Smiley hum
Sujet clos
Aller à