Dynamically Colouring Before & After Elements with Inherit Values

Super cute outlined speech bubbles

I recently designed and developed a WordPress site that used some super cute outlined speech bubbles in the design, and I needed to make those speech bubbles dynamically coloured via user selection in WordPress.

Initially, I thought I’d just pop the before and after elements into inline styles in the php file, grabbing the user selected colour code from WordPress. But lo and behold, turns out psuedo elements can’t be used inline (or at least that’s what the internet and my attempts to use them as such told me).

So, then I thought, okay, I’ll somehow add the PHP code into my CSS… and literally my brain trailed off just like that as I realized that’s also not possible.

Cue hair-tearing. And intensive googling.

After reading a lot of stack overflow threads and a few overly complicated solutions using JavaScript, I discovered the answer. Or at least an answer. Inherit!

According to MDN, “theinherit CSS-value causes the element for which it is specified to take the computed value of the property from its parent element.” It’s like how I inherited my dad’s giant ears, but in CSS form.

In the context of what I was trying to do with my outlined speech bubbles, this is how I used inherit: I set a border-coloron the parent element of the speech bubble inline in the php file, and then used inherit as the border-color of the before element in my CSS. It then inherited (see?) the colour of the border from the parent element, which I set in the PHP file to be the colour my user selects in WordPress.

Here’s what the code in the PHP file looked like:

<div class=”headline” style=”border:<?php echo $speechbubble; ?> 10px solid”>

And here’s what the CSS looked like (written using SASS):

.headline {
margin-top: 100px;
padding: 30px;
border-radius: 30px;
position: relative;
&:before {
content: ‘’;
border-left: 70px solid transparent;
border-bottom: 45px solid transparent;
border-right: 1px solid transparent;
border-top: 45px solid;
border-top-color: inherit;
position: absolute;
bottom: -95px;
left: 15%;
}
&:after {
content: ‘’;
border-left: 60px solid transparent;
border-bottom: 37px solid transparent;
border-right: 1px solid transparent;
border-top: 40px solid white;
position: absolute;
bottom: -68px;
left: 15%;
}
}

For the basic colour-outlined speech bubbles on my site, this worked great! But, some of the speech bubbles on my site don’t inherit the colour of their parent element, instead, they inherit the background colour. The actual speech bubble outline is white, but the after element that fills in the arrow to make it an outline is the same colour as the background, which is dynamically generated based on user input.

Speech bubble inheriting the background colour, not the outline colour

For this case, I tried a lot of different things. What finally worked was a bit of a workaround solution. In order to get that after element to inherit a border colour that matched the background colour the user selected, and not the white border, I had to attach it to a different parent, and one that had the border colour I wanted the after element to inherit. (It seems pretty simple now that I write it out, but it took me a while to get there).

Inside of the div I created that had the white border, I created another div with an inline 0px border the same colour as the section background. This is what it looked like in my PHP file (with that $sectionbg variable being created earlier in the file):

<div class=”whiteBorder”><div class=”backgroundBorder” style=”border:<?php echo $sectionbg; ?> 0px solid”>

Then I applied the before and after elements to this div, with the invisible border, instead of to the div with the white border. That way, I could use inherit on the after element to colour the inner arrow the same colour as the background, because the parent element is now the div that has a border the same colour as the background—it just can’t be seen because it’s 0px thick. Here’s what that looked like in my CSS (written using SASS):

.backgroundBorder {
&:before {
content: ‘’;
border-left: 38px solid transparent;
border-bottom: 28px solid transparent;
border-right: 2px solid transparent;
border-top: 28px solid white;
position: absolute;
bottom: -60px;
left: 15%;
}
&:after {
content: ‘’;
border-left: 25px solid transparent;
border-bottom: 21px solid transparent;
border-right: 1px solid transparent;
border-top: 21px solid;
border-top-color: inherit;
position: absolute;
bottom: -35px;
left: 17%;
}
}

Et voila! The children inherited their parents’ user-generated border colours, I felt like a CSS magician, and hopefully this helps you feel like one too.