Comment faire le soulignement de cette fraction à l'aide de CSS P>
Voici ce que j'ai essayé mais il devient une ligne complète p> p>
<h2>Key Offerings for You</h2>
3 Réponses :
Je t'ai fait un SVG. Je suis juste en collé comme une image de fond dans le p> :: après code> pseudo-élément et le centre-center-l'alignez-le en dessous. Vous pouvez la colorer avec la propriété remplir code> et redimensionnez-la sans perte de la qualité.
<svg width="120" height="8" viewBox="0 0 120 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="40" width="80" height="8" rx="4" fill="#C4C4C4"/>
<rect width="20" height="8" rx="4" fill="#C4C4C4"/>
</svg>
Vous allez ici, après que je vous ai laissé jouer avec la gauche et la largeur pour le faire comme si vous le souhaitez:
p>
<h2>Key Offerings for You</h2>
Cela ne répond pas au texte à l'intérieur, si le texte change de texte, il sera mal aligné.
@Dantheman 1er Il n'a pas demandé de réactivité, la 2e réactive est facile à faire en définissant une largeur sur le conteneur, 3ème it est une en-tête de sorte qu'il ne changera pas tant et il ne spécifiait pas pour avoir spécifié de manière spécifiée. Mais votre solution est également une bonne option.
La réactivité est implicite car il s'agit d'un élément essentiel du bon développement frontaleux. Les valeurs de codage dur comme celle-ci ne sont jamais bonnes. L'en-tête pourrait être réutilisé sur tout le site avec des quantités de texte variables.
Voici une solution qui restera en réalité centrée sur le texte. Vous devrez peut-être modifier certaines valeurs pour l'obtenir.
p>
<h2>Heading</h2> <br> <h2>Really long heading</h2>
Vous pouvez également utiliser le
avant pseudo élément