chef 3744 Posted July 12, 2017 Share Posted July 12, 2017 (edited) The more I learn CSS the more I'm starting to understand it. However, I do have a question. I understand ":before" and ":after" pseudo elements. But lately I've been seeing something like this: ".header:before, .header:after, .header i, .header i:before, .header i:after { }" Does this allow me to break the element styling up even more then just before and after? On my login page I have only a certain amount of room to work with my server logo. It looks like: "HOMEMEDIASERVERONLINE" I'm able to break the two colors up by using ":before", and ":after". when I use @keyframes to animate my style, I can animate each part of the logo, but the animations happen at the time. If I put a delay in my second animation (fading in the word "ONLINE") then the animation will happen, but the element is visible prior to it. This is not ideal and I would like it to invisible prior to fading in. I can't actually target the visibility value without it changing the entire element. If I use this technic of ".header i", will this help me? This is my code anyway: .visualLoginForm h1:before{ content: "HOMEMEDIASERVER" !important; visibility: visible; float:left; font-size: 150%; font-weight:lighter; border-left: 3px solid rgba(82,181,75,225); padding-left:10px; animation-name: omgwtfbbq; animation-duration: 1.5s; } .visualLoginForm h1:after{ content: "ONLINE" !important; visibility:visible; opacity:0%; font-size: 150%; font-weight:bold; float:left; color:#52B54B; animation-name:fadein; animation-duration: 2s; animation-delay: 1.5s; } I hope I have explained my question properly. Many thanks! Ben Edited July 12, 2017 by chef Link to comment Share on other sites More sharing options...
chef 3744 Posted July 13, 2017 Author Share Posted July 13, 2017 Must be referring to an "i" (icon) element in the header. Oh well moving on! Link to comment Share on other sites More sharing options...
Luke 36878 Posted July 13, 2017 Share Posted July 13, 2017 In general you want to use css for style and appearance. It only has limited ability for content insertion such as this. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now