Why after pseudo-element overlap parrent

[newbie]

I think the best to explain will be jsfiddle: http://jsfiddle.net/13zL5tzc/1/

I wanna to both (before and after) pseudo-elements under parent. How to do that?

[RyanReese]

I dunno what look you are going for but pseudo elements are like doing this (spans are the :before / :after)

<div>
<span></span>
regular element
<span></span>
</div>

Style it using that logic. You position:absolute the pseudo elements right now and that’s just causing it to overlap the content of the element. What look are you going for? You can simply remove the position:absolute (and the bottom property / z-index) and then add in display:block; (force new lines) and it’ll be on separate lines.

Dunon the look you are going for so you might still want the position:absolute on there but I’m guessing in the dark right now.

[PaulOB]

Looks like you want z-index:-1 on the :before and :after rules. (if I’m understanding correctly).

[dresden_phoenix]

I am not sure what you were AIMING to do, but my guess is you need to adjust your Z-index on your pseudo elements to -1, alternatively you could give your content element ( a sibling to your pseudo element, as shown in ryan’s illustration) relative position and then z-index:0