[css] Can I have multiple :before pseudo-elements for the same element?

If your main element has some child elements or text, you could make use of it.

Position your main element relative (or absolute/fixed) and use both :before and :after positioned absolute (in my situation it had to be absolute, don't know about your's).

Now if you want one more pseudo-element, attach an absolute :before to one of the main element's children (if you have only text, put it in a span, now you have an element), which is not relative/absolute/fixed.

This element will start acting like his owner is your main element.

HTML

<div class="circle">
    <span>Some text</span>
</div>

CSS

.circle {
    position: relative; /* or absolute/fixed */
}

.circle:before {
    position: absolute;
    content: "";
    /* more styles: width, height, etc */
}

.circle:after {
    position: absolute;
    content: "";
    /* more styles: width, height, etc */
}

.circle span {
    /* not relative/absolute/fixed */
}

.circle span:before {
    position: absolute;
    content: "";
    /* more styles: width, height, etc */
}

Examples related to css

need to add a class to an element Using Lato fonts in my css (@font-face) Please help me convert this script to a simple image slider Why there is this "clear" class before footer? How to set width of mat-table column in angular? Center content vertically on Vuetify bootstrap 4 file input doesn't show the file name Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width

Examples related to css-selectors

Angular 2: How to style host element of the component? How to click a href link using Selenium How do I apply a style to all children of an element How to write a CSS hack for IE 11? :last-child not working as expected? Need to find element in selenium by css jQuery select child element by class with unknown path How do I select an element that has a certain class? What is the difference between cssSelector & Xpath and which is better with respect to performance for cross browser testing? What is the mouse down selector in CSS?

Examples related to pseudo-element

CSS pseudo elements in React Add line break to ::after or ::before pseudo-element content Using CSS :before and :after pseudo-elements with inline CSS? Combine :after with :hover Can I have multiple :before pseudo-elements for the same element? :after and :before pseudo-element selectors in Sass Creating a border like this using :before And :after Pseudo-Elements In CSS? css rotate a pseudo :after or :before content:"" Can I change the height of an image in CSS :before/:after pseudo-elements? Using :before CSS pseudo element to add image to modal

Examples related to css-content

CSS: how to add white space before element's content? Can I have multiple :before pseudo-elements for the same element? CSS content property: is it possible to insert HTML instead of Text? Vertically aligning CSS :before and :after content Can I use a :before or :after pseudo-element on an input field? Adding HTML entities using CSS content