CSS :before :after background color

css before image
css after background image
css before not working
before and after
how to use :before and after in inline css
css after image
css-tricks before
after vs before

I want to turn the heart shape black upon click but changing .heart's color won't affect its :before :after selector. Is there any way to do so?

.heart {
  background-color: red;
  height: 60px; /*dimension of the square*/
  position: relative;
  top: 40px; /*position from top*/
  transform: rotate(-45deg); /*negative = counter clockwise, put 0 to try*/
  width: 60px; /*dimension of the square*/
  transition: all 1s ease; /*length of animation*/
}

.heart:before,
.heart:after {
  content:""; /*kosong, for it to exist*/
  background-color: red;
  border-radius: 50%; /*perfect round curve*/
  height: 60px; /*dimension of the shape*/
  position: absolute;
  width: 60px; /*dimension of the shape*/
}

.heart:before {
  top: -30px; /*position of the left shape*/
  left: 0; /*remember rotated ACW 45deg*/
}

.heart:after {
  left: 30px; /*position of the right shape*/
  top: 0px; /*remember rotated ACW 45deg*/
}

.heart
    {
        opacity:0.3; /*original state*/
    }
.heart:hover
    {
        opacity:1; /*hover state*/
    }
.heart:active
    {
        opacity:1; /*hover state*/
        background:black;
    }

You need to target your pseudo-elements when applying an :active / :hover etc. state as well.

Like so:

.heart:active::before,
.heart:active::after {
  background: black;
} 

Here is a working Fiddle.

I also added a transition for your pseudo elements, so that they can fade nicely with the bottom part of the heart.

Use CSS ::before and ::after for simple, spicy image overlays , In this example, I chose a fun gradient, but you could use a simple background color or even Duration: 9:02 Posted: Apr 30, 2018 Use :after elements to create the simplest HTML possible to render useful and fun overlays on top of background images. Then extend them with blend-modes!

Simply change the value of the background property of the pseudo-elements to inherit and it will match the backgroundof the parent .heart element at all times. This way you don't have to remember to add more rules if you add more colour changes in the future. And it has the added bonus of inheriting the transition from red to black from the parent.

.heart{
  background:#f00;
  height:60px;
  left:30px;
  opacity:.3;
  position:relative;
  top:40px;
  transform:rotate(-45deg);
  transition:background 1s ease,opacity 1s ease;
  width:60px;
}
.heart:hover{
  opacity:1;
}
.heart:active{
  background:#000;
  opacity:1;
}
.heart:before,.heart:after{
  content:"";
  background:inherit;
  border-radius:50%;
  height:60px;
  position:absolute;
  width:60px;
}
.heart:before{
  left:0;
  top:-30px;
}
.heart:after{
  left:30px;
  top:0;
}
<div class="heart"></div>

CSS ::before Selector, Use the ::after selector to insert something after the content. p::before { content: "Read this -"; background-color: yellow; color: red; font-weight: bold; }. The CSS :before and :after properties are what also known as pseudo elements.They are used to add something before or after the content of an element. There are a lot of great uses for these pseudo elements, and we are here to explore some of them.

In your case, as mentioned before, you need to specifically target the before and after pseudo elements. the way to do this is by adding the following CSS:

.element:active::before,
.element:active::after{
  background-color: #000;
}

This way you will target the before and after pseudo elements when your element is active. There is a great article here explaining the before and after property.

CSS ::after Selector, content to insert. Use the ::before selector to insert something before the content. p::after { content: " - Remember this"; background-color: yellow; color: red; Notes Before Firefox 57, Firefox had a bug where ::before pseudo-elements were still generated, even if the content property value were set to normal or none. Notes Before Firefox 3.5, only the CSS level 2 behavior of :before was supported, which disallowed position, float, list-style-* and some display properties. Full support 1

::before (:before), In CSS, ::after creates a pseudo-element that is the last child of the selected element. Note: The pseudo-elements generated by ::before and ::after are background-color: #FFBA10; border-color: black; border-style: dotted;  The ::before and ::after pseudo-elements in CSS allows you to insert content onto a page without it needing to be in the HTML. While the end result is not actually in the DOM, it appears on the page as if it is, and would essentially be like this:

::after (:after), But when I change the color and default the position of the ::before and .heart::​after { background-color: blue; content: ""; border-radius: 25%;  Notes Before Firefox 57, Firefox had a bug where ::after pseudo-elements were still generated, even if the content property value were set to normal or none. Notes Before Firefox 3.5, only the CSS level 2 behavior of :after was supported, which disallowed position, float, list-style-* and some display properties. Full support 1

Confused by ::before and ::after - HTML-CSS, The ::before and ::after pseudo-elements in CSS allows you to insert Useful for clearfix and inserting images as background-images (set  CSS: :before and :after pseudo elements in practice / By definition :before and :after are CSS pseudo elements. You can use them to insert something before or after the content of an element. There are some great articles giving the basics, but I wanted to write down a blog post for the real use cases. Or, at least, to show what I'm using them for.

Comments
  • Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet. See How to create a Minimal, Complete, and Verifiable example
  • Please upload a fiddle with both html and css, it will be way easier for us to help you.
  • thanks will do next time!
  • @AhQuan, they mean you should edit this question to include the additional information they're requesting.