Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

:after and :before pseudo-element selectors in Sass [duplicate]

People also ask

What do the pseudo selectors before and after allow you to do?

CSS ::before and ::after pseudo-elements allow you to insert “content” before and after any non-replaced element (e.g. they work on a <div> but not an <input> ). This effectively allows you to show something on a web page that might not be present in the HTML content.

What is the correct syntax for styling before pseudo-element in SCSS?

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.

Can you use multiple pseudo class selectors with an element?

You can combine several CSS pseudo-elements for one element. However, you cannot use CSS ::after two times or ::before two times.

Can you combine pseudo selectors?

If you're talking about pseudo-classes, then yes, you can combine them in any order.


Use ampersand to specify the parent selector.

SCSS syntax:

p {
    margin: 2em auto;

    > a {
        color: red;
    }

    &:before {
        content: "";
    }

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