Element:after -- two questions

maya90 · August 31, 2012, 5:41pm

I have two questions about :after:

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:

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

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…

chris_upjohn · September 1, 2012, 1:33am

maya90:

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:
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.

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.

dresden_phoenix · September 1, 2012, 3:52am

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.

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.

maya90 · September 1, 2012, 2:00pm

thank you all for your responses…

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

this works:

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

but none of these work…

#form_top section:last-child:after { clear:both; content:"test - clear div"; display:block; }

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

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…

dresden_phoenix · September 1, 2012, 8:17pm

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)


	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:


<!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.

maya90 · September 5, 2012, 3:34am

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…

zoom:expression

oh man… what is this? one more thing I need to learn, I guess…

thank you…

dresden_phoenix · September 5, 2012, 7:47pm

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