::before CSS between browsers is off

Tagged: , , ,

Author Posts

andrewpeters October 14, 2021 at 2:42 pm

Heads up! this post was created when Microthemer was at version 6. The current version is 7. Some references to the interface may be out of date.

Hey guys, made a quick video to explain my situation: https://www.loom.com/share/4667bee0c6de4d0f8a48b27e0bcb9a7f

Here’s the code I’m using: 

/*H1 Heading Highlights*/
.green-text {
position: relative;
z-index: 9;
}

.green-text::before {
content:"";
z-index: -1;
display: inline-block;
top: 50%;
position: absolute;
bottom: 1px;
margin-left: 4px;
padding: 16px;
width: calc(100% + 2px);
background: #B1C63A;
border-radius: 10px;
transform:  skewX(-20deg);
}

Sebastian October 14, 2021 at 3:57 pm

Hmm, I can’t see anything wrong with your CSS. But it looks like there is an issue with the width of the green area. Also, is top:50% necessary? Could you leave that out and have height: 50%? Just a guess, but setting both top and bottom can sometimes lead to less predictable results.

Also might be worth trying display: block on the main element e.g.

.green-text {
position: relative;
z-index: 9;
display: block;
}

But all this is guessing, I would normally ask for a link to the page to work out what’s going on, but I see you’re working on a local .dev site.

Cheers,
Sebastian

andrewpeters October 14, 2021 at 7:11 pm

Solid. Thanks Sebastian!

You must login or register to reply to this topic.