CSS “contenu” ne fonctionne pas
Je voudrais ajouter que le texte du paragraphe par CSS plutôt que dans le code HTML, parce que c'est un sujet à changement de la réactivité du site.
Maintenant je ne peux pas le faire fonctionner, et je me demandais si il ya quelque chose de mal avec le CSS?
Aussi, est-ce la seule façon que cela pourrait être fait (avec du pur HTML et CSS) ou est-il une autre façon de cibler un texte et de le modifier pour chaque résolution?
HTML:
<p class="title"></p>
CSS:
p.title {
width: auto;
height: auto;
position: relative;
float: left;
clear: none;
margin: 40px 0 0 0;
padding: 0;
display: block;
font-family: 'Fjalla One', sans-serif;
font-weight: 400;
font-size: 36px;
color: #d76e50; color: rgba(215, 92, 52, 0.9);
cursor: default;
content:"TITLE GOES HERE";
}
OriginalL'auteur Borsn | 2013-11-04
Vous devez vous connecter pour publier un commentaire.
Le CSS
content
propriété peut être utilisée uniquement avec::before
et::after
pseudo-éléments. Vous pourriez contourner le problème en créant un élément enfant qui n'a de styles sur::after
par exemple, et comprend également lecontent
bien pour le texte qui dépend de la résolution via les media queries.:before
àp.tittle
. Semble fonctionner maintenant. Merci. Une autre question, comment <br> texte dans le contenu de la balise?Définir la
white-space: pre;
de la propriété et de l'utilisation\a
où vous avez besoin d'un retour à la ligne.Parfait. Merci @Delan Azabani.
OriginalL'auteur
CSS n'est pas la place pour mettre du contenu, même si vous ne souhaitez que le contenu de changement dans le cadre de votre responsive design.
Le point de l'ensemble de HTML/CSS/JS est d'avoir une séparation entre le contenu, le style et les scripts. Mettre le contenu en CSS ou de style dans le HTML des pauses, peu importe quelles sont vos intentions.
Mais pour répondre directement à votre question: CSS
content
n'est valable que dans des cas très rares. Il n'est pas disponible sur général sélecteurs (précisément parce que les points que j'ai faite ci-dessus).content
est uniquement disponible pour les sélecteurs d'entraîner des pseudo-éléments ajoutés à la page. Dans la pratique, cela signifie que vous ne pouvez vraiment utilisercontent
avec::before
et::after
sélecteurs.Et même dans ces cas, où vous pouvez l'utiliser, vous devriez tout de même de ne pas l'utiliser dans la façon dont vous avez décrit. Avec
::before
et::after
, il n'est pas prévu pour mettre du contenu dans votre CSS; il est fait vraiment juste pour des tâches telles que l'insertion d'un marqueur à côté de quelque chose, comme le petit symbole que vous obtenez à venir pour les liens externes dans des sites comme Wikipedia. Ce genre de chose est encore le style, et est donc juste d'être dans le CSS, même s'il faut ajouter du contenu".Veuillez noter que le contenu inséré à l'aide de
::before
et::after
peuvent se comporter différemment des autres contenus de votre site. Par exemple, vous ne serez pas en mesure d'accéder à la pseudo-élément via Javascript, et votre utilisateur peut ne pas être en mesure de sélectionner le texte.Le plus typique de la façon de réaliser ce que vous essayez de faire est d'avoir deux (ou plus) éléments de la page qui contient les différents contenus des chaînes, et d'avoir votre responsive CSS code de déclencher l'une d'entre eux d'être visibles et d'autres cachés en fonction de la taille de la page.
OriginalL'auteur
CSS contenu de la propriété ne peut être appliquée qu' pseudo-éléments selon le Mozilla Developer Réseaux Documents, de sorte que vous pouvez ajouter ces lignes de code dans votre fichier css:
OriginalL'auteur