Afficher une barre extensible à coté du titre

Cet article renvoie à un précédent post sur la possibilité de créer des barres de chaque coté d’un titre.Da cet article on va plutot voir la technique pour placer une seule barre d’un coté ou de l’autre du titre, en l’occurence ici à droite.

barre-menu

Voici un exemple de code:

On crée une div dans laquelle on place notre titre, peu importe son style :

<div class="inner_title">
	<h2>Nos services</h2>
</div>

Ensuite on va crée via notre css un pseudo-élément « after » pour créer notre barre


.inner_title h2:after{
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    margin-right: -100%;
    margin-bottom: 7px;
    margin-left: 7px;
    border-bottom: 1px solid #6e3df7;
}

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.