À l’aide de CSS pour insérer du texte

Question

Je suis relativement nouveau pour les CSS, et l'ont utilisé pour modifier le style et la mise en forme du texte.

Maintenant, je voudrais l'utiliser pour insérer du texte comme indiqué ci-dessous:

<span class="OwnerJoe">reconcile all entries</span>

J'espère que j'ai pu obtenir pour montrer que:

Joe Tâche: concilier toutes les entrées

C'est, tout simplement par le fait d'être de la classe "Propriétaire Joe", je veux que le texte Joe's Task: à être affiché.

Je pourrais le faire avec un code comme:

<span class="OwnerJoe">Joe's Task:</span> reconcile all entries.

Mais cela semble terriblement redondant à la fois de préciser la classe et le texte.

Est-il possible de faire ce que je suis à la recherche?

MODIFIER Une idée est d'essayer de le configurer comme un ListItem <li> où la "balle" est le texte "de Joe Tâche". - Je voir des exemples de la façon de définir les différentes balles de styles et même des images pour des balles. Est-il possible d'utiliser un petit bloc de texte pour la liste-balle?

Answer 1

Il est, mais requiert un navigateur compatible CSS2 (tous les principaux navigateurs, IE8 +).

Mais je vous recommande plutôt l’utilisation de Javascript pour cela. Avec jQuery :

Answer 2

La réponse en utilisant jQuery que tout le monde semble aimer comporte un défaut majeur, qui est-ce n’est pas évolutive (au moins comme il est écrit). Je pense que Martin Hansen a la bonne idée, qui consiste à utiliser des données HTML5-* attributs. Et vous pouvez même utiliser l’apostrophe correctement :

Answer 3

Découvrez également la fonction attr() de l’attribut content de CSS. Il génère un attribut de l’élément de donnée comme un nœud de texte. Utilisez-le comme suit :

Ou même avec les nouveaux attributs de données personnalisés d’HTML5 :

Answer 4

Juste le code comme ceci :

Answer 5

Il s’agit d’une chose aux modèles qu’un truc du style.

Création de modèles comme appliquer un affichage à un modèle de données.

Moustachede caisse.