[Résolu] Saut de ligne dans un attribut data*

Bonjour,

Je ne trouve pas mon bonheur sur internet donc je m'adresse à vous.
Je suis en train de faire un portfolio et le dev web n'est pas ma spécialité donc je vous explique.

J'ai un titre avec dont voilà le code :

<h1 data-letters="Portfolio DOE John">Portfolio<br>DOE John</h1>

J'utilise un effet pour qu'au survol de la souris, le même texte viens de la gauche pour ce calqué sur le texte de base mais avec une couleur différente.

Le problème c'est que dans l'attribut data-letters, il n'y a pas la balise <br>, donc comment faire un saut de ligne dans l'attribut ?

Merci à vous.

Cordialement.

Salut

Déjà si tu veux changer la couleur d'un texte, pourquoi tu passe par un data attribut ?

pourquoi ne pas récupérer la vrai valeur de ta balise

("h1").html() ?

Bonjour,

une animation avec text-shadow pourrait suffire non ? L'ombrage sera identique à ton texte.

Sinon voir du côté de https://stackoverflow.com/questions/358874/how-can-i-use-a-carriage-return-in-a-html-tooltip (la meilleure réponse et le 1er commentaire

Bonjour,

Merci de vos réponse.
Il s'agit de l'effet Kukuri sur cette page : https://tympanus.net/Development/TextStylesHoverEffects/
Qui utilise un attribut justement. C'est ma faute j'aurais du vous mettre cela dès le début.

<h1 class="link link--kukuri" data-letters="Portfolio DOE John">Portfolio<br>DOE John</h1>

Au survole de la souris, il y aura l'effet de la barre qui traverse et ensuite il y aura une image dans le texte a la place de la transition de couleur. Pour l'instant j'ai régler le problème avec un span mais ça le fait uniquement sur le Portfolio ou sur DOE John mais pas les 2 en même temps.

<h1><span class="link link--kukuri" data-letters="Portfolio">Portfolio</span><br><span class="link link--kukuri" data-letters="DOE John">DOE John</span></h1>

Si vous avez une idée ?

Cordialement.
Modifié par Thoriak (04 May 2019 - 14:35)

aliasdmc
Merci beaucoup pour ta solution, ça marche super.
Un petit soucis car mon :before commence trop loin du coup il y a un décalage avec le texte du dessous. Cela viens du fat que j'ai un

text-align : center

mais je vais me débrouiller

Merci encore.
Modifié par Thoriak (08 May 2019 - 14:25)