what does &::before mean in scss

Question

I came across some stying in my scss file which looks like this:

:host {
    &::before {
        content: '';
        display: block;
        width: 100%;
        height: $channel-border-w;
        background: $color-border-divider-bg;
    }
}

does this mean to style the element before my host?

In this case the ampersand is used to indicate that you are using a nested pseudo element. For example, you can't just nest a `:hover` pseudo class by itself in SCSS you have to add the ampersand first: `&:hover`. The double colons indicate a pseudo element selector, meaning the before element isn't actually in the DOM, although you can still use it as a selector. A pseudo class uses one colon (i.e. :hover), while a pseudo element used two. — Rich, Mar 09 '18 at 20:49
@Mark can you take your comment and post it as an answer? I thought you explained it well how the element isn't actually in the DOM while other answers just reiterated what it says in the docs online — DannyD, Mar 09 '18 at 21:22
@R Doolabh your questions was marked as a duplicate, so unfortunately I'm not able to post it as an answer. But glad to hear it helped! — Rich, Mar 09 '18 at 21:39

score 4 · Answer 1 · answered Mar 09 '18 at 20:46

From MDN docs,

In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.

The & before it indicates that it is adding this pseudo selector to the selector it is nested under, which is your host element.

The snippet you posted could be translated to:

:host::before {
   ... your styles here ...
}

score -1 · Answer 2 · answered Mar 09 '18 at 20:48

& adds something selected to parent selector. ::before creates a pseudo-element as child of parent selector.

i let you the full doc here:

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#parent-selector

https://developer.mozilla.org/en-US/docs/Web/CSS/::before

https://css-tricks.com/the-sass-ampersand/

what does &::before mean in scss

2 Answers2