Bonjour :) Est-il possible d'avoir une bordure inférieure au centre (sans utiliser de photos). Quelque chose comme séparateur entre les éléments de la liste qui ne vont pas de bord au bord?
merci
6 Réponses :
pas directement. Mais s'il est correct d'insérer des éléments supplémentaires uniquement pour le bien de la frontière, vous pouvez rendre ces éléments moins larges que vos éléments de liste "appropriés" pour atteindre l'effet souhaité.
Vous pouvez le faire avec deux éléments facilement, voici une démo http://jsfiddle.net/slash197/jbfrn/6/
.dropDown {
background-color: #F6F6F2;
border: 1px solid #D6DAC4;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
margin-top: -1px;
padding: 10px;
width: 110px;
}
ul, ol {
list-style: none outside none;
margin: 0;
padding: 0;
}
ul.ddMenu li {
border-bottom: 1px solid #E9EADE;
box-shadow: 0 1px #FFFFFF;
display: list-item;
line-height: 2.3;
}
ul.ddMenu li a {
display: block;
padding: 4px 10px;
}
Je sais que c'est une vieille question mais j'ai trouvé ce fil à l'aide de Google.
On peut également être accompli avec: après P>
div:after {
content: '.';
display: block;
height: 1px;
width: 200px;
margin: 0px auto;
text-indent: -9999px;
border-top: 1px solid #585858;
}
<h1 class="center underlined">
<span>My title</span>
<h1>
h1 {
&.center.underlined {
display: flex;
align-items: center;
justify-content: center;
span {
border-bottom: 3px solid;
}
}
}
Old Post, mais je me demandais comment faire cet effet un jour de 2017
Je l'ai fait avec pseudo élément :: après et affichage: hériter