28172 sujets

CSS et mise en forme, CSS3

[Résolu] :: before, alignement 2è ligne

Bonjour,

Sur la PJ, vous voyez un chevron en ::before avant le titre des dernières news. Je suis ds le footer, ds une colonne d'1/3 donc il peut arriver que le titre passe sur 2 lignes.
Dans ce cas, j'aimerais que le mot "des" commence sous "taxe" et non sous le chevron.

Comment faire ?
Merci et bon dimanche
Marine
Modérateur
Salut,

Pas de PJ sur ton post Smiley sweatdrop (sinon un petit codepen ou fiddle serait top)
Sinon au pif je penche vers un float:left sur le chevron.

bonne journée
Modérateur
Sans pj, j'essaie d'imaginer un peu le truc et je pense qu'il te faudrait positionner ton chevron en absolute et donner un padding à ton texte pour qu'il démarre toujours du même point.
Désolée j'ai oublié, c'était dimanche Smiley cligne
Voici l'URL temp : yesyouweb Smiley dot com/dev, c'est dans le footer 3è colonne.
Merci !
Modérateur
Ha ! J'avais mal lu l’énoncé aussi !
Et bah comme le dit Yordi il faut mettre une padding left sur le conteneur et décaler le chevron vers la gauche en absolute ou autre.
Hum, c'est un widget auto donc j'ai mis un padding-left à .footer_color div .news-headline et un position absolute à .footer_color div .news-headline::before mais ça se chevauche.
Vous pouvez regarder en live, j'ai ouvert le site.
Merciiiiiiiiii
Administrateur
Hello,

Tu as beaucoup d'éléments imbriqués (inutilement ?), il faut donc appliquer les bonnes propriétés aux bons éléments.

Dans ton cas, c'est un strong qui porte ton ::before.
Si tu veux placer ton ::before en absolute, il faut que ce strong soit en position: relative. Puis, une fois ton ::before positionné, indiquelui des coordonnées, par exemple left: 0;

EDIT : le plus simple serait que ce soit le li qui porte le ::before.
Modifié par Raphael (19 Mar 2018 - 15:11)
Sujet clos
Aller à