Make some Style in table elements

Hi there,

HTML Tables are a pain in the *** for any styling adjustments, so trying to move that column content to somewhere else is nigh on impossible.

How is the table being created ?

The table is being created by default Gutenberg table block

That block is super limited you can only add text to it.
One thing it does provide is the option to highlight some text.

So if you were to include that 'title' as part of your description, you can select it and choose Hightlight from the toolbar dropdown menu.

This will wrap that text in a <mark> tag. Which you could use some CSS to style.

Happy to help with the CSS if you want to try that.

I have tried to pick the elements.
Could you please check now?

You've added this CSS:

.mtr-cell-content small {
    background-color: #27ae60;
    display: block;
    font-size: 11px;
    color: #fff;
    padding: 5px 16px;
    font-weight: 600;
    line-height: 14px;
    position: relative;
}

It looks working fine. The border radius should be added to this selector instead of .mtr-cell-content small:before.

And I don't think this CSS is needed:

.mtr-cell-content small:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #27ae60;
    opacity: .14;
    border-radius: 4px;
}

Hey

I want to add opacity for background-color like this https://prnt.sc/lvGbo-a5J5qq

Then you just need to add an RGBA color instead of the HEX color code for background.

This RGBA color picker should help:
https://rgbacolorpicker.com/

And here's a guide on how RGBA color being used in CSS:
https://www.w3schools.com/cssref/func_rgba.asp