Why does it take different CSS to center the :before and :after pseudo-elements in my instance?

My Site. PW = "SAS PW" (without the quotes). Template: Bedford.

I style the

<hr>

tag including adding the § symbol centered on the line. I use the :after pseudo-element to do that. The CSS is:

hr {  padding: 0 !important;  border: none !important;  border-top: 5px double #ff0000 !important;  color: #ff0000 !important;  text-align: center !important;}hr:after {    content: "§";    display: inline-block;    position: relative;    top: -0.7em;    font-size: 1.5em;    padding: 0 0.25em;    background-image: url(/url/image.jpg);}

This works in Chrome, Firefox and Safari; I haven't gotten it to work in IE but that's another question.

The result can be seen in this screenshot:

and live on the Home Page.

The key CSS property declarations for centering the § symbol are:

display: inline-block;position: relative;

and, I think, the 

text-align: center;

in the hr {} rule set.

I use the :before pseudo-element to add text before the images on a gallery page. The CSS is:

body.collection-type-gallery #content:before {  content: "Click on the image, an arrow or a thumbnail to see another slide.";  display: block;  position: relative;  text-align: center;}

The result can be seen in this screenshot

and live at the Gallery Page.

The key property declarations for centering the text are:

display: block;position: relative;text-align: center;

The question is:Why is the CSS to center the :before pseudo-element differentfrom that to center the :after pseudo-element. For the former,it's display: inline-block; and for the latter it's display: block;

I'm really curious and I'll appreciate any light anyone can shed on this.

@octopus:

Well, I kind of expected that. What I'm wanting is an elucidation. What are the differences in HTML structure and style inheritance that cause the one to center with display: inline-block and the other with display: block;?

If I understand that perhaps I can, in the future, know when to use the one and when the other rather than having to experiment.

@octopus:

Thanks for the citation.

I understand that ::before and ::after are virtual :first-child() and :last-child() elements and in that sense they're not different. I would expect them to behave the same way. With your citation and a little further reading, I think I understand the differences between inline, inline-block, and block.

But I still have no answer to my question.

^continued:

Both the ::after and ::before are positioned relative.

In this instance, the ::after is inline-block and seems to center itself with no explicit centering property declaration. While the ::before is block and requires text-align: center to center.

Why?

I understand that it has something to do with the HTML structure (and possibly CSS inheritance). I'd like to try to understand what that is.

^continued:

So the issue is why a block element (the ::before) centers with text-align: center, which I understood only works for inline elements not for block elements. I thought block required margin: 0 auto to center. And why does the inline-block (::after) center itself with no explicit centering property declaration?

@octopus:

Thanks for taking the time to compose the jsfiddle, and indeed, taking the time to read the question in the first place.

I'm reading additional texts and pondering.

OK. I think I've figured it out. I'll venture an explanation.

Addressing first the :after pseudo-element.

The hr element is block level. (StackOverflow) The :after pseudo-element matches a virtual last-child of the selected element and is inline by default (MDN - ::after pseudo-element) but in this case displays inline-block.

Its normal position in the document flow is below the hr and to the left. Because it's a (virtual) last-child of the hr displaying inline, the text-align: center in the hr CSS rule set centers it. Because it also displays block, the position: relative and the top: -0.6em in its own rule set pull it up to overlap the hr. Thus it appears in the center and on top of the hr.

Addressing second the :before pseudo-element.

It matches a virtual first-child of the selected element, in this case an image block, and displays inline by default but in this case displays block. Its normal position in the document flow is above the image block. Its default width is 100%.

Because its width is 100%, there is no issue of centering it itself. (If it had a lesser width, it could be centered by margin: 0 auto. (W3C: Centering Things)) Its content is the inline text and that is centered by the text-align: center declaration in its rule set.

It's worth noting that the position: relative declaration is superfluous in this instance because there is no positioning declaration in the :before rule set. The (block) pseudo-element remains at its normal position in the document flow.

After a lot of reading, pondering and ruminating, this is my understanding of what is going on in this instance. If anyone sees something wrong in my analysis or has a comment I'll be interested to see it.

For those like me looking for an answer on the internet, just add "width:inherit; height:inherit;" in :: after. it will then help to place the content like any other div ( relative to its parent ).