Why is the pseudo content :after not shown after but in the corresponding div?

问题

The following example shows a box div with an :after content, which should be a separate block.

div.box {
    background-color: #FAA;
    width: 10em;
    overflow: scroll;
}
div.box:after {
    content: "☑";
    display: block;
    background-color: #AFA;
    width: 5em;
    overflow: auto;
}

<div class="box">x</div>

But the after content is placed inside the scroll bars. My expectation was that it comes actually after the scrollable area.

回答1:

The :after content comes within the scrollable area because even though the element is named :after, it is in actual terms a child of the div.box and hence will be positioned within the .box element (that is within the scrollable area).

From MDN: The CSS ::after pseudo-element matches a virtual last child of the selected element.

(emphasis mine)

So the code in question in essence becomes the same as the following snippet.

div.box {
    background-color: #FAA;
    width: 10em;
    overflow: scroll;
}
div.box .after {
    display: block;
    background-color: #AFA;
    width: 5em;
    overflow: auto;
}

<div class="box">x
  <div class="after">☑</div>
</div>

If you want it positioned outside the div.box then you would have to use the :after on a container (or) use absolute positioning.

div.box {
    background-color: #FAA;
    width: 10em;
    overflow: scroll;
}
div.container:after {
    content: "☑";
    display: block;
    background-color: #AFA;
    width: 5em;
    overflow: auto;
}

<div class="container">
  <div class="box">x</div>
</div>

回答2:

I think you've become a little confused with pseudo elements, so i'll hopefully clear a few things up for you:

The ::after pseudo-element can be used to describe generated content after an element's content.

A quick demonstration of this would be:

 p::after {
   content: "  :Note";
 }

<p>In CSS 2.1, it is not possible to refer to attribute values for other elements than the subject of the selector.</p>

See how, no matter where the div is, the pseudo element will be displayed after the element it is attached to. This is the way pseudo elements were designed for -to add content before or add content after.

This means that the :after is positioned relatively to the 'real' element, and not appear after the 'scrollbars'.

Instead, if you position your pseudo element absolutely, then as you would expect with positioning a child element, you can 'move' it using the left, right, top and bottom properties:

div.box {
    background-color: #FAA;
    width: 10em;
    overflow: scroll;
}
div.box:after {
    content: "☑";
    position:absolute;
    display: block;
    background-color: #AFA;
    width: 5em;
    overflow: auto;
}

<div class="box">x</div>

Note

However, I would instead wrap the scrollable content in a div, and that way you would have much more control over the positioning of the element.

The similarities in ::after and :after

This [double-colon] notation is introduced … in order to establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after). This compatibility is not allowed for the new pseudo-elements introduced in CSS level 3. ~Spec

So, The short answer is..

There is no difference between the two notations

The slightly Long answer is...

With the introduction of CSS3, in order to make a differentiation between pseudo-classes and pseudo-elements, in CSS3 all pseudo-elements must use the double-colon syntax (::after), and all pseudo-classes must use the single-colon syntax (:first-child).

However, since IE8 and below doesn't understand this 'double colon' syntax (amongst so many others), browsers will accept the single colon syntax anyway (allowing IE 8 and below to also understand it). This is why developers, on the broad side, have chosen to keep using the single colon syntax in order for IE8 (and below) to understand, giving your site better browser compatability.

Further Reading

http://www.w3.org/wiki/CSS/Selectors/pseudo-elements/:after

回答3:

My expectation was that it comes actually after the scrollable area.

This expectation is wrong. Looking at the CSS2.1 specification, we find:

Authors specify the style and location of generated content with the :before and :after pseudo-elements. As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element's document tree content.

And then:

The formatting objects (e.g., boxes) generated by an element include generated content.

What this means is that the content you've added with your div.box:after rule is included inside the div. The "after" refers to it being placed after the div's normal content, not after the entire div.

Source: http://www.w3.org/TR/CSS21/generate.html

来源：https://stackoverflow.com/questions/28473976/why-is-the-pseudo-content-after-not-shown-after-but-in-the-corresponding-div

标签

html

css

pseudo-element

css-content