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?

Answer: 
From [MDN docs](https://developer.mozilla.org/en-US/docs/Web/CSS/::before),

> 
> 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 [`&`](https://css-tricks.com/the-sass-ampersand/) 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 ...
}

```
& 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/>