Css pseudo-element ::before(2); :before and ::before
The CSS spec on content describes all three syntaxes.
:before
-- outdated syntax for pseudo elements. Use if older browser support is needed such as IE8. IE9 supports the new syntax. It also seems like iOS Safari does not support the new syntax::before
-- new pseudo element syntax. This is equivalent to::before(1)
::before(n)
-- used to create multiplebefore
elements that can be before other::before
s. Details are in the same spec.- As far as I can tell, no browser supports this.
- http://jsfiddle.net/535Rf/
What is the difference between :before and ::before?
This distinguishes pseudo elements from pseudo classes.
The difference between pseudo classes and pseudo elements is described at http://www.d.umn.edu/~lcarlson/csswork/selectors/pseudo_dif.html
Can I have multiple :before pseudo-elements for the same element?
In CSS2.1, an element can only have at most one of any kind of pseudo-element at any time. (This means an element can have both a :before
and an :after
pseudo-element — it just cannot have more than one of each kind.)
As a result, when you have multiple :before
rules matching the same element, they will all cascade and apply to a single :before
pseudo-element, as with a normal element. In your example, the end result looks like this:
.circle.now:before {
content: "Now";
font-size: 19px;
color: black;
}
As you can see, only the content
declaration that has highest precedence (as mentioned, the one that comes last) will take effect — the rest of the declarations are discarded, as is the case with any other CSS property.
This behavior is described in the Selectors section of CSS2.1:
Pseudo-elements behave just like real elements in CSS with the exceptions described below and elsewhere.
This implies that selectors with pseudo-elements work just like selectors for normal elements. It also means the cascade should work the same way. Strangely, CSS2.1 appears to be the only reference; neither css3-selectors nor css3-cascade mention this at all, and it remains to be seen whether it will be clarified in a future specification.
If an element can match more than one selector with the same pseudo-element, and you want all of them to apply somehow, you will need to create additional CSS rules with combined selectors so that you can specify exactly what the browser should do in those cases. I can't provide a complete example including the content
property here, since it's not clear for instance whether the symbol or the text should come first. But the selector you need for this combined rule is either .circle.now:before
or .now.circle:before
— whichever selector you choose is personal preference as both selectors are equivalent, it's only the value of the content
property that you will need to define yourself.
If you still need a concrete example, see my answer to this similar question.
The legacy css3-content specification contains a section on inserting multiple ::before
and ::after
pseudo-elements using a notation that's compatible with the CSS2.1 cascade, but note that that particular document is obsolete — it hasn't been updated since 2003, and no one has implemented that feature in the past decade. The good news is that the abandoned document is actively undergoing a rewrite in the guise of css-content-3 and css-pseudo-4. The bad news is that the multiple pseudo-elements feature is nowhere to be found in either specification, presumably owing, again, to lack of implementer interest.
Using 2 ::before and 2 ::after pseudo element for 1 class
In the same element you can not.
It is not the same item but you can get something similar.
.transx{ position:absolute; top: 0; left: 0; width: 100%; height: 100%;}.classOne { text-align: center; position: absolute; left: 50%; width: 20%; height: 55px; border-radius: 0px; box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1); outline: 3px solid gold; overflow: hidden; background: #ffbb00; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: antialiased; -webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px; text-shadow: rgba(0,0,0,.01) 0 0 1px; margin-left:30.6%; display: flex; justify-content: center; align-items: center; cursor: pointer; }a.classOneBtn{ color: white; font-family: 'Chivo Black', sans-serif; font-size: 18px; font-weight: 500;}
.transy::before { height: 100%; width: 5px; background: white; content: ""; position: absolute; left: 0; top: 0; -moz-transform: scaleY(0); -ms-transform: scaleY(0); -webkit-transform: scaleY(0); transform: scaleY(0); -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; transition: 0.3s;}
.transy::after { height: 100%; width: 5px; background: white; content: ""; position: absolute; right: 0; top: 0; -moz-transform: scaleY(0); -ms-transform: scaleY(0); -webkit-transform: scaleY(0); transform: scaleY(0); -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s;}
.transx::before { height: 5px; width: 100%; background: white; content: ""; position: absolute; left: 0; top: 0; -moz-transform: scaleX(0); -ms-transform: scaleX(0); -webkit-transform: scaleX(0); transform: scaleX(0); -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; transition: 0.3s;}.transx::after { height: 5px; width: 100%; background: white; content: ""; position: absolute; left: 0px; bottom: 0; -moz-transform: scaleX(0); -ms-transform: scaleX(0); -webkit-transform: scaleX(0); transform: scaleX(0); -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; transition: 0.3s;}
.transx:hover::before, .transx:hover::after { -moz-transform: scaleX(1); -ms-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1);}
.transy:hover::before, .transy:hover::after { -moz-transform: scaleY(1); -ms-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1);}
<div class="classOne transy"> <div class="transx"></div> <div class="flex-row"> <a href="/" class="classOneBtn">Custome Text</a> </div></div>
Two pseudo elements ::before with different properties
You seem to have only one pseudo element.
And that's here in the UI:
Your CSS cascades to:
.el:before {
content: '';
display: inline-block;
width: 0;
height: 0;
border-top: 50px solid #e86d0a;
border-left: 50px solid transparent;
position: absolute;
border-bottom: 50px solid #e86d0a;
border-left: 50px solid transparent;
top: 0;
left: -50px;
}
See the way Chrome has treated your combined CSS:
How to use the CSS pseudo element :before in multiple classes of same element
Here you are SIR
demo: http://jsfiddle.net/7UjgL/
the style:
.letter{
width:40px;
height:20px;
position:relative;
letter-spacing: 26px;
}
.letter:first-letter{
color:red;
}
.letter:before,.letter:after{
position:absolute;
top: 0px;
}
.letter:before{
content: 'o';
color: green;
left: 11px;
}
.letter:after{
content:'n';
color:blue;
left: 22px;
}
the markup:
<div class=letter>ze</div>
Related Topics
How to Use CSS3: :Selection Without Changing The Default Color and Background Color
Why Am I Unable to Apply a Border to an Angular Mat-Table Row
How to Show Md-Toast with Background Color
Angular2 Module Level Stylesheets
CSS Center Image in a Clipped Parent Div
Styling Links Inside a Div with a Specific Class
Right Corner Ribbon on a Div CSS
Dynamic CSS Properties in Less
Sass: Selecting The Parent Element with Multiple Nested Selectors
CSSmin Not Correctly Handling @Import
How to Set Different Font-Weight for Fallback Font
CSS Form Checkbox Styling with Checked and After Tags
Why Do Browsers Render Rgba Differently on Osx
How to Set a Floating Div's Width to Take Up Remaining Space Without Pushing Other Divs Down
CSS: Why Is Vertical-Align: Baseline Stop Working on Firefox When Using Overflow: Hidden