Modifier l'épaisseur de ligne de CSS 'souligné' attribut
Puisque vous pouvez souligner n'importe quel texte en CSS comme ceci:
H4 {text-decoration: underline;}
Comment Pouvez-vous aussi éditer cette 'ligne' qui est dessinée, la couleur que vous obtenez sur la ligne est facilement spécifiée comme 'color: red' mais comment édite-t-on la hauteur de la ligne, c'est-à-dire l'épaisseur?
Des idées?
8 réponses
Voici une façon d'y parvenir:
HTML:
<h4>This is a heading</h4>
<h4><u>This is another heading</u></h4>
CSS:
u {
text-decoration: none;
border-bottom: 10px solid black;
}
Voici un exemple: http://jsfiddle.net/AQ9rL/
Récemment, j'ai dû faire face à FF qui souligne étaient trop épais et trop loin du texte dans FF, et a trouvé une meilleure façon de le traiter en utilisant une paire de box-shadows:
.custom-underline{
box-shadow: inset 0 0px 0 white, inset 0 -1px 0 black
}
La première ombre est placée au-dessus de la seconde et c'est ainsi que vous pouvez contrôler la seconde en variant la valeur 'px' des deux.
Plus: différentes couleurs, épaisseur et souligner position
Moins: ne peut pas utiliser sur non-solide milieux
Ici, j'ai fait quelques exemple: http://jsfiddle.net/xsL6rktx/
Très facile ... en dehors de l'élément" span " avec une petite police et souligné, et à l'intérieur de l'élément "font" avec une plus grande taille de police.
<span style="font-size:1em;text-decoration:underline;">
<span style="font-size:1.5em;">
Text with big font size and thin underline
</span>
</span>Je vais faire quelque chose de simple comme :
.thickness-underline {
display: inline-block;
text-decoration: none;
border-bottom: 1px solid black;
margin-bottom: -1px;
}
- , Vous pouvez utiliser
line-heightoupadding-bottompour définir possition entre eux - , Vous pouvez utiliser
display: inline, dans certains cas,
Démo : http://jsfiddle.net/5580pqe8/
Une Autre façon de le faire est d'utiliser ":après" (pseudo-élément) sur l'élément que vous souhaitez souligner.
h2{
position:relative;
display:inline-block;
font-weight:700;
font-family:arial,sans-serif;
text-transform:uppercase;
font-size:3em;
}
h2:after{
content:"";
position:absolute;
left:0;
bottom:0;
right:0;
margin:auto;
background:#000;
height:1px;
}
Solution Finale: http://codepen.io/vikrant-icd/pen/gwNqoM
a.shadow {
box-shadow: inset 0 -4px 0 white, inset 0 -4.5px 0 blue;
}
Le background-image peut également être utilisé pour créer un soulignement.
Il doit être déplacé vers le bas via background-position et répété horizontalement. La largeur de ligne peut être ajustée dans une certaine mesure en utilisant background-size (l'arrière-plan est limité à la zone de contenu de l'élément).
.underline
{
--color: green;
font-size: 40px;
background-image: linear-gradient(var(--color) 0%, var(--color) 100%);
background-repeat: repeat-x;
background-position: 0 1.05em;
background-size: 2px 5px;
}<span class="underline">
Underlined<br/>
Text
</span>Ma Solution : https://codepen.io/SOLESHOE/pen/QqJXYj
{
display: inline-block;
border-bottom: 1px solid;
padding-bottom: 0;
line-height: 70%;
}
Vous pouvez ajuster la position de soulignement avec la valeur line-height, l'épaisseur de soulignement et le style avec border-bottom.
Attention à désactiver le comportement de soulignement par défaut si vous voulez souligner un href.