::before attribute not working?

[FlatlineTV]

I'd like to incorporate a social media icons before every li element:

li id="twitter" data-in-effect="fadeIn" data-out-effect="fadeOut" li id="facebook" data-in-effect="fadeIn" data-out-effect="fadeOut" li id="youtube" data-in-effect="fadeIn" data-out-effect="fadeOut"

I'm using:

li#twitter::before {content: url(../assets/social/facebook.svg);} li#facebook::before {content: url(../assets/social/facebook.svg);} li#youtube::before {content: url(../assets/social/youtube.svg);}

But it seems like this plugin is overriding any extra elements? Very confused...

[jschr]

Hm.. can't think of a reason why this plugin would do anything to break pseudo-elements. Do you have a reproducible of the issue?

[FlatlineTV]

Thank you for quickly replying! Would love to figure this out ASAP.

Perhaps it's something on my end?

View my code if you can!

[jschr]

Do you have a screenshot of what the page looks like before and after applying textillate?

Still guessing but what textillate does is parse the contents of the <li> and wrap each letter in a <span>. Maybe it has something to do with the new html structure after applying textillate? You could try targeting the first span with something like #twitter span:first-child::before { ... }.

If you have a demo I can play around with I could probably help a little more.

[FlatlineTV]

Thank you so much for helping me out my man! DL: Social-Widget-Flatline.zip

[jschr]

Ya it definitely has to do with the html being altered but it's worse than I thought. Textillate hides the ul and creates a new element underneath it and renders the spans in there (which is what animates). That's why you don't see the icon - the parent ul is display none.

I'm not sure the best way to workaround it yet. Whats your desired behaviour? Do you want the icon to animate as the first character in the text? Or do you want it to replace icon in every loop?

[FlatlineTV]

Oh man! How unfortunate - still a beautiful plugin nonetheless. :)

I would simply love the appropriate social-media icon representing the appropriate ID name.

I wonder if including a div on the same line as the text would suffice, but not as efficient. :(

[jschr]

If you grab the new version of this plugin, this should work:

<h1 class="tlt">
  <ul class="texts">
    <li data-id="twitter" data-in-effect="fadeIn" data-out-effect="fadeOut">Twitter Name</li>
    <li data-id="facebook" data-in-effect="fadeIn" data-out-effect="fadeOut">Facebook Name</li>
    <li data-id="youtube" data-in-effect="fadeIn" data-out-effect="fadeOut">YouTube Name</li>
  </ul>
</h1>

.tlt[data-active=twitter]::before {content: url(../assets/social/twitter.svg);}
.tlt[data-active=facebook]::before {content: url(../assets/social/facebook.svg);}
.tlt[data-active=youtube]::before {content: url(../assets/social/youtube.svg);}

[FlatlineTV]

Absolutely incredible! I appreciate the fix so much.

Thank you! <3

[jschr]

No problem! Feel free to post back with a link when the site's ready. Would love to start showing off some real world examples.

[FlatlineTV]

One last thing!

What type of time is minDisplayTime set to? ms?

I am trying to sync an animation with it (the icons fading in & out).

Thank you.

[jschr]

ya, minDisplayTime is in ms. It's passed directly to setTimeout: https://github.com/jschr/textillate/blob/master/jquery.textillate.js#L226