:after and :before pseudo-element selectors in Sass

css css-selectors sass pseudo-element
Marco Godínez picture Marco Godínez · May 25, 2012 · Viewed 276.7k times · Source

How can I use the :before and :after pseudo-element selectors following the syntax of Sass or, alternatively, SCSS? Like this:

p
  margin: 2em auto
  > a
    color: red
  :before
    content: ""
  :after
    content: "* * *"

Of course, the above fails.

Answer

shellbro picture shellbro · May 25, 2012

Use ampersand to specify the parent selector.

SCSS syntax:

p {
    margin: 2em auto;

    > a {
        color: red;
    }

    &:before {
        content: "";
    }

    &:after {
        content: "* * *";
    }
}

Related questions

Sass and combined child selector

I've just discovered Sass, and I've been so excited about it. In my website I implement a tree-like navigation menu, styled using the child combinator (E > F). Is there any way to rewrite this code with a simpler (or …

Read More
How do you define attribute selectors in SASS?

In CSS, you can do this: input[type=submit] { // properties } It's a very useful for styling form buttons. How do you do the same thing in SASS?

Read More
Can I use variables for selectors?

I have this variable: $gutter: 10; I want to use it in a selector like so SCSS: .grid+$gutter { background: red; } so the output becomes CSS: .grid10 { background: red; } But this doesn't work. Is it possible?

Read More