SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    789
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    element:after -- two questions...

    I have two questions about :after:

    1) how do you know if element is there (if empty of content, like for a clear div)? it doesn't show in Firebug
    (unless I did something wrong..) my code:

    Code:
    header div:last-child:after {clear:both; }

    2) how do you tell it what kind of element you want (div, span, etc)??
    it seems you can style it, and even put content in it, but you can't specify what HTML element it's supposed to be... I find this puzzling....

    thank you...

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by maya90 View Post
    1) how do you know if element is there (if empty of content, like for a clear div)? it doesn't show in Firebug
    (unless I did something wrong..) my code:

    Code:
    header div:last-child:after {clear:both; }
    Pseudo elements aren't real elements there for there isn't actually anyway specific way to physically see it in the page source, you can debug it with the CSS panel but that's about all you can do.

    Quote Originally Posted by maya90 View Post
    2) how do you tell it what kind of element you want (div, span, etc)??
    it seems you can style it, and even put content in it, but you can't specify what HTML element it's supposed to be... I find this puzzling....
    You shouldn't ever need to give a pseudo element a type as its simply just a container that starts of as an inline element in which you can then turn into block level element if you choose, there would be no reason why we would ever need to specify the type of element since there is no way for the W3C validator to understand where the pseudo element exists in the source.
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,732
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    First of all... :before or :after pseudo elements REQUIRE content:, if you don not declare content.. even if its just: "" the pseudo element will not be generated. After that checking to see that it was is easy... for example by declaring content:"X"...if you see an "X" then you know the element was generated.


    2) how do you tell it what kind of element you want (div, span, etc)??
    You really can't tell it to be any type of element. A pseudo element is not really there, nor does it have any type of semantic value.

    You can think of it as a "span", to style as you wish, by adding CSS rules.

    as Chris said:
    its simply just a container that starts of as an inline element in which you can then turn into block level.
    Hope that sheds light on things.

  4. #4
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    789
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    thank you all for your responses...



    I don't get this :after thingie, it's turning out to be very unpredictable....


    this works:

    Code:
    header ul:last-child:after { clear:both; content:"test - clear div"; display:block; }

    but none of these work...

    Code:
    #form_top section:last-child:after { clear:both; content:"test - clear div"; display:block; }
    Code:
    #form_top section:nth-child(2):after {clear:both; content:"test - clear div"; display:block; }

    Code:
    section#upload a:last-child:after { clear:both; content:"test - clear div"; display:block; }
    
    /* for testing -- works: */
    section#upload a:last-child {border:solid 1px magenta; }
    so I don't quite get this :after thingie.... ;-)

    (but I don't know if it's worth the hassle.. it's not supported by from IE8 on down...)

    I think am going back to doing those clear divs in the traditional way and putting them in the markup... (& then the fact, like someone here said, that it's not a real element (i.e., does not become an element in the DOM, hmmmmm... that's not too practical either... (elements created and appended to another element with Javascript do become part of the DOM, right? and you see them in Firebug..)

    thank you all for your responses....

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,732
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    I think am going back to doing those clear divs in the traditional way and putting them in the markup...
    you could just use overflow:hidden for that.


    using this in the PARENT ELEMENT declaration simulates :fore and :after for IE<8. You can even ad it to a condition IE style sheet)
    Code:
    	zoom:expression(
    		runtimeStyle.zoom=1,
    		insertAdjacentHTML('beforeEnd','<span class="after"></span>')
    	);	
    
      zoom:expression(
    		runtimeStyle.zoom=1,
    		insertAdjacentHTML('afterBegin','<span class="before"></span>')
    	);

    Alos are you sure you matching your mark up to your HTML? The your CSS works fine for me ( haven't checked IE) , of course I wrote HTML to match.

    for example:

    Code:
    <!DOCTYPE HTML>
    <html>
    	<head>
    		<title></title>
    		<style type="text/css">
    section#upload a:last-child:after { clear:both; content:"test - clear div"; display:block; }
    		</style>
    	</head>
    	<body>
    		<section id='upload'>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat <a href="#">nulla pariatur</a>. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit<a href="#"> anim id est</a> laborum.		
    		
    		</section>
    	</body>
    </html>
    works just fine.

    Then again it may not be what you were expecting (it seems odd to put a BLOCK inside and INLINE LINK... but here is no accounting for taste).. but that's exactly what that CSS should do given that mark up.

  6. #6
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    789
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    thank your for yr response..
    I put "display:block" just to be anal, so the "clear" div appears beneath last floated element....

    yes, it works in the code you posted, in my page, only some of them work (like I indicated in my OP.. I have now gotten rid of all of them... but well, for future reference I still want to learn about this of course...

    Code:
    zoom:expression
    oh man.. what is this? one more thing I need to learn, I guess.. ;-)

    thank you...

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,732
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    Glad You found this helpful.

    Expression is IE<9 specific ( but not conditional code) . And to a certain extent so was Zoom.
    Expressions essentially run .js ( in the case of my example it automatically inserts an inline element with a class.. so I am mimicking :before/:after); as no other browsers understand "expressions" and few "zoom" it has no effect on good browsers.

    if you are a purist ( want your CSS to validate and such) use this rule, along with any other IE exceptions, in a separate stylesheet brought in via conditional comment conditional comment


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •