Pseudo Elements

Question

How do i get the double colon part (::before) inside the .green part?

.green {
z-index: 3;
position: relative;
background:-webkit-linear-gradient(360deg, Black, #006600);
width: 120px;
height: 120px;
color: #FFF;
margin-top: -175px;
margin-left: 100px;
border-radius:5px;
}
.green::before {
content: url("https://wow.zamimg.com/images/wow/icons/medium/inv_misc_food_15.jpg");

Answer 1

You can apply a rule of css styles to more than one selector at the same time by separating them with a comma. Then use additional rules to each individual selector as needed for the styles that apply only to that selector.

.green, .green::before {
...styles that apply to both
}

.green {
... styles that apply only to .green
}

.green::before {
... styles that apply only to .green::before
}
Etc.

Answer 2

You should clarify your question a bit.. "Getting the pseudo element inside something"....

If you want to apply same style for both, which I assume as you gave a css snippet, you can just copy it and apply it on both...

https://developer.mozilla.org/en-US/docs/Web/CSS/::before