J'ai un texte qui doit être souligné uniquement sous la partie centrale du mot.Comment centrer et modifier la longueur du soulignement?
J'ai créé le fiddle et je veux que le soulignement soit centré comme indiqué dans ce image.
Le code CSS que j'ai inclus dans le violon sont:
.footer p
{
width: 50%;
border-bottom: 1px solid #f51c40;
}
Vous pouvez utiliser un pseudo position absolue élément avec left: 50%; transform: translate(-50%); pour le centrer automatiquement horizontalement par rapport au contenu.
.footer p {
display: inline-block;
position: relative;
}
.footer p:after {
content: "";
height: 1px;
width: 50%;
background-color: red;
position: absolute;
bottom: -.5em;
left: 50%;
transform: translate(-50%);
}<div class="footer">
<p>ADDITIONAL INFO</p>
</div>Cela peut se faire de plusieurs façons et plus d'informations est nécessaire de vous ...
Voici une façon du haut de ma tête qui est très droit devant
<div class="footer">
<p>Add<u>ition</u>al</p>
</div>
Une autre alternative comprendrait l'utilisation du .footer p:before et/ou :after éléments psuedo ...
vous pouvez utiliser l'élément pseudo :: after. Si vous ne savez pas quels pseudo elemts je vous recommande learn about them here car c'est une partie très importante de CSS que vous utiliserez souvent. l'élément pseudo :: after est capable d'ajouter du contenu après un certain élément.
vous pouvez créer une bordure après l'élément p par exemple:
.footer p::after {content:""; height: 1px; width: 50px; background-color: red;}
@MrLister merci de souligner cela, mon erreur. J'ai corrigé ma réponse avec le bon libellé. – Dave
Il devrait fonctionner comme vous avez besoin
footer p
{
width: 50%;
}
footer p:after {
content: '';
border-bottom: 2px #000 solid;
position: absolute;
top:40px;
left: 30px;
width:100px;
}
La meilleure façon de le faire pour utiliser les éléments pseudo css ::after. Aussi, vous devez définir display: inline-block et position: relative à l'élément p.
S'il vous plaît voir l'extrait ci-dessous:
.footer p {
display: inline-block;
position: relative;
}
.footer p::after {
content: "";
width: 60px;
height: 3px;
background: black;
position: absolute;
left: 0;
right: 0;
margin: auto;
bottom: -3px;
}<div class="footer">
<p>ADDITIONAL INFO</p>
</div>
Est-ce le ':: after' élément pseudo disponible pour cela? –
Veuillez inclure tout le code pertinent ** dans la question elle-même, pas sur un site externe ** comme [mcve]. –
Pourquoi les paragraphes de bas de page sont-ils définis sur une largeur de '50%'? Je pense qu'il y a plus que nous avons besoin de voir pour déterminer une bonne solution. –