:after and :before pseudo-element selectors in Sass

Question

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.

@cimmanon Actually, the question "Sass .scss: Nesting and multiple classes?" is duplicated, because it was asked after a month of this one — Marco Godínez, Feb 11 '16 at 01:19
Age is not how we determine duplicates. The other question is a more general version of this question, which is why it was closed as a duplicate. — cimmanon, Feb 11 '16 at 01:22

score 517 · Accepted Answer · edited Apr 29 '17 at 09:21

517

Use ampersand to specify the parent selector.

SCSS syntax:

p {
    margin: 2em auto;

    > a {
        color: red;
    }

    &:before {
        content: "";
    }

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

edited Apr 29 '17 at 09:21

rhinosforhire

1,305
11
20

answered May 25 '12 at 08:06

shellbro

5,327
1
15
5

1

Does it apply to all pseudo class and element? – Bharathkumar V Feb 13 '18 at 11:02

:after and :before pseudo-element selectors in Sass

1 Answers1

Linked