text not lining correctly, creating a backdrop effect

[leodesigndev]

i came accross issue where i had highlight looking like the bellow

what helped to hide the issue is modifying/overwritting the .css so that i have

.hlta-highlight mark {
    background-color: #00a1a1;
    color: rgba(0, 0, 0, 0);  /* <--- Help prevent offset introduced by target text area styling*/
}

1. can this be considered a proper fix , or what should the fix look like ?

[wstaeblein]

Sorry but I can't seem to reproduce your problem. Could you post the full code? Are you sure you haven't got any CSS interfering with the class'? When calculating where to position a highlight the class takes into account a few properties (padding, border, etc.) but there may be some left out properties that could also impact this positioning and you may be using one such.

[levesquesimon]

Im using your plugin on a textera with bootstrap and i had the same problem as @leodesigndev and his fix worked for me! So thank you so much.

I changed nothing else only added the code snippet from @leodesigndev in the css file.

Also when using Bootstrap, i added the extra space around the word so i added a class to the <mark> and this snippet in the css file:

    .hlta-mark {
        all: unset;
    }

↓