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

user_567328 0
Viewed 155544

Is it possible to have multiple :before pseudos for the same element?

.circle:before {
    content: "\25CF";
    font-size: 19px;
}
.now:before{
    content: "Now";
    font-size: 19px;
    color: black;
}

I am trying to apply the above styles to the same element using jQuery, but only the most recent one is applied, never both of them.

pseudo-element css-content css-selectors css
5 Answers

I've resolved this using:

.element:before {
    font-family: "Font Awesome 5 Free" , "CircularStd";
    content: "\f017" " Date";
}

Using the font family "font awesome 5 free" for the icon, and after, We have to specify the font that we are using again because if we doesn't do this, navigator will use the default font (times new roman or something like this).

user_128453950

You can also use an image/icon plus text in the content field

e.g.

p.album-title::after {
  content: url('https://...camera-icon-blue.png') ' View >';
  display: block;
  ...;
}
user_115883980

In ::after css set content:'any text' and add backgroun-image with svg text from external svg file url(anySvgText.svg) or inline svg code url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="30" width="200"><text x="0" y="15" fill="black" style="font-family: tahoma;">any second text</text></svg>')

Also you can use only svg instead content value. but you must set empty string (content: '') to display a ::after style

.circle:before {
    content: "\25CF";
    font-size: 19px;
    color: red;
    width: 200px;
    display: block;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="30" width="200"><text x="0" y="15" fill="black" style="font-family: tahoma;">Now</text></svg>');
    background-position-x: 15px;
}
<div class="circle"></div>

user_29278510
Related