J'ai recherché de nombreuses questions similaires sur SO, mais je n'ai pas obtenu exactement le résultat souhaité. Je veux similaire comme ceci:
Je veux styliser deux lignes différentes avec différentes couleurs de BG
J'ai essayé avec ce style
<h1 class="g1-mega g1-mega-1st entry-title" itemprop="headline">Top 25 Wild Bird Photographs of the Week: Mountain Birds </h1>
h1.g1-mega.g1-mega-1st.entry-title:first-line {background:#ffd334;}
h1.g1-mega.g1-mega-1st.entry-title:last-line {background:#ddd;}
veuillez vérifier fiddle
la deuxième ligne CSS ne fonctionne pas.
4 Réponses :
h1.g1-mega {background:#ddd;}
h1.g1-mega:first-line {background:#ffd334;}
Vous n'avez pas de sélecteur de dernière ligne - vous avez donc l'option de définir le style pour le h1 et de remplacer la première ligne avec le sélecteur de première ligne :
<h1 class="g1-mega g1-mega-1st entry-title" itemprop="headline"> Top 25 Wild Bird Photographs of the Week: Mountain Birds </h1>
h1.g1-mega.g1-mega-1st.entry-title {background:#ddd;}
h1.g1-mega.g1-mega-1st.entry-title:first-line {background:#ffd334;}
Notez que toutes les propriétés ne fonctionnent pas avec le sélecteur première ligne - voir une liste de propriétés ici :
Seul un petit sous-ensemble de propriétés CSS peut être utilisé avec le :: Pseudo-élément de première ligne:
Toutes les propriétés relatives aux polices: police, crénage de police, style de police, font-variant, font-variant-numeric, font-variant-position, font-variant-east-asiatique, font-variant-caps, font-variant-alternates, font-variant-ligatures, font-synthèse, font-feature-settings, remplacement de la langue de la police, épaisseur de la police, taille de la police, ajustement de la taille de la police, font-stretch et font-family
Toutes les propriétés liées à l'arrière-plan: background-color, background-clip, background-image, background-origin, background-position, background-repeat, background-size, background-attachment et background-blend-mode
La propriété color
espacement des mots, espacement des lettres, décoration du texte, text-transform et line-height
texte-ombre, texte-décoration, texte-décoration-couleur, texte-décoration-ligne, texte-décoration-style, et alignement vertical.
<h1><span>Top 25 Wild Bird Photographs</span><br>
<span>of the Week: Mountain Birds </span>
</h1>
span:first-child {
background-color: yellow;
padding: 10px;
}
span:last-child {
background-color: lightgreen;
padding: 10px;
}
h1 {
line-height: 1.8;
}
D'après ce que je comprends, l'auteur souhaite obtenir cet effet sans balises supplémentaires
Vous avez peut-être raison, mais je n'ai pas vu cette exigence dans la question. @flppv
<h1> <span>Top 25 Wild Bird Photographs</span> <span>of the Week: Mountain Birds </span> </h1>
span {
padding: 10px 8px;
display: inline-block;
}
span:first-child {
background-color: yellow
}
span:last-child {
background-color: lightgreen;
}
Il est impossible de mettre en œuvre exactement comme sur la capture d'écran sans envelopper une partie du texte dans une autre balise.
Ce n'est pas possible. Vous devez au moins les mettre en différence.