Nouvelle méthode (nécessite le jQuery de l’ancienne méthode) :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
@mixin make-line-behind-title(){ font-size: rem(18); text-transform: uppercase; text-align: center; display: block; width: 100%; position: relative; &:after{ position: absolute; z-index: -1; top: 50%; left: 0; content: ""; height: 1px; width: 100%; background-color: $site-font-color-light; } > span{ background-color: #fff; padding: 0 8px; } } |
Ancienne méthode :
Sources : CSS line behind title text, Wrap all text before first
tag within an
Problème : scanner le contenu se trouvant entre les balises ouvrante et fermante de titre, repérer le premier retour chariot et imbriquer tout le texte se trouvant avant celui-ci dans une nouvelle balise.
Avant exécution du jQuery :
|
1 |
<h1 class="heading-one">lorem ipsum<br />dolor sit amet<br />lorem ipsum dolor<br />sit amet</h1> |
Après exécution du jQuery :
|
1 |
<h1 class="heading-one"><span class="line-behind-text">lorem ipsum</span><br />dolor sit amet<br />lorem ipsum dolor<br />sit amet</h1> |
Solution :
jQuery :
|
1 2 3 4 5 |
jQuery(document).ready(function(){ jQuery('.heading-one').each(function (){ jQuery(jQuery(this).prop('firstChild')).wrap('<span class="line-behind-text" />'); }); }); |
CSS :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
.heading-one{ text-align: center; position: relative; overflow: hidden; } .heading-one .line-behind-text { display: inline-block; vertical-align: baseline; zoom: 1; *display: inline; *vertical-align: auto; position: relative; padding: 0 20px; } .heading-one .line-behind-text:before, .heading-one .line-behind-text:after { content: ''; display: block; width: 1000px; position: absolute; top: 0.73em; border-top: 1px solid red; } .heading-one .line-behind-text:before { right: 100%; } .heading-one .line-behind-text:after { left: 100%; } |