[HTML/CSS] Créer des éléments "pré-fabriqués"

electroking Messages postés 236 Date d'inscription   Statut Membre Dernière intervention   -  
electroking Messages postés 236 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour à tous,

Je souhaite savoir comment je pourrai faire pour créer des éléments avec un contenu "automatique" :

Autrement dit, en insérant cette ligne : 

<div class="monObject"></div>


Je souhaiterai que la page l'interprète comme si elle contenait des balises HTML, comme par exemple : 

<div class="monObject">
    <span>Un texte</span>
</div>


L'objectif étant de pouvoir utiliser un grand nombre de balises de classes monObjet sans avoir à réécrire son contenu à chaque fois.

J'avais cherché du coté de la propriété "content" en css qui permet d'ajouter à un ensemble de balises du contenu en fonction d'un selecteur, ex : 

<div class="monObject"></div>


.monObject::after { content: 'Quelques mots'; }


Qui donne ce résultat : 

Quelques mots


Malheureusement, cette propriétés css ne prend pas en compte les balises HTML d'après ce que j'ai compris. Et si je remplaçai par exemple "Quelques mots" dans l'exemple ci-dessus par "<span>Un texte</span>" j'obtiendrai ceci : 

<span>Un texte</span>


Auriez vous une solution qui me permette de réaliser ceci ?

Merci d'avance pour votre/vos réponse-s
A voir également:

3 réponses

Réponse 1 / 3
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Bonjour,
Tu peux toujours faire ça en javascript (et même plus simple... en jquery).

Par exemple (en jquery) via la méthode append
https://api.jquery.com/append/ 

$(".monObject").append("<span>Un texte</span>");

0
Réponse 2 / 3
electroking Messages postés 236 Date d'inscription   Statut Membre Dernière intervention   6
 
Le problème c'est que Javascript nécéssite un certain temps de traitement, et je préfèrerai de l'instantané ...
0
Réponse 3 / 3
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Alors peut-être en utilisant les caractères unicode 
nav a:hover:after {
    content: "\2193";
}

Après.. voir si tu peux faire une séquence de caractères unicode qui représenteraient ton span

0
electroking Messages postés 236 Date d'inscription   Statut Membre Dernière intervention   6
 
Je te remercie mais ces caractères unicodes sont affichés en texte brut non ?

Je viens de tester par exemple : 

div::after { content: '\003Cspan\003E'; }


et cela affiche : 

<span>
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Je n'ai pas testé. Mais il y' a des chances.
perso... je ne me serais jamais posé ta question.... je l'aurais directement fais en JS.
Et si le code js est bien écrit ... ça sera aussi rapide que du css......
0
electroking Messages postés 236 Date d'inscription   Statut Membre Dernière intervention   6
 
En fait le truc, c'est que je veux pouvoir faire ça sur un grande quantité de div (un nombre à 4 chiffres ou plus).
J'ai expérimenté les animations à la fois en js et en css et j'ai remarqué que le css avait un "temps d'exécution" - si je peut appeler ça comme ça - beaucoup plus court quand il s'agit de manipuler une grande quantité d'éléments ...
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Tu ne peux pas tout faire en css.....
Et pour ta question.. je n'ai pas la solution.

(je déplace ta question dans le forum CSS .... dès fois que quelqu'un d'autre ait une idée... )
0
electroking Messages postés 236 Date d'inscription   Statut Membre Dernière intervention   6
 
Je cherche pas forcément en CSS mais je cherche le moyen le plus rapide d'automatiser ça en fait.
Peut-être que mes codes JS ne sont pas très bien optimisés mais il me semblait que sur la manipulation de grosse quantité de données, ça ramait un peu et ça mettait du temps.
0