Can CSS add a pseudo element to text that acts like a background & wraps with the text?

MohamedRamrami
May 18, 2023
162 views
0 votes
2 Answers

I have the following markup

<p>Lorem ipsum dolor, sit <mark>adipisicing  adipisicing elit</mark> adipisicing elit. 
Debitis amet quasi deserunt possimus neque laborum, suscipit obcaecati quae pariatur 
quia sit provident, ipsum iusto quos, aliquid ut eveniet beatae ad!</p>

I’m trying to add a "highlight" style to the <mark> tag.

Normally I would just use a background color but in this case, I have a solid theme color in a CSS variable --site-color: #dc2626 (that comes from the CMS so I can’t change it), and I don’t know how to add opacity to a css variable.

My first attempt is to make the mark tag relative and add an absolute pseudo element with the solid background and 0.1 opacity, this works but only if the mark is on a single line, it doesn’t work when the text wraps (small screen or long text).

So my question is how to make this pseudo element act the same way as a background and wraps with the text.

:root {
  --site-color: #c026d3; /* Can't change this */
}

p mark {
    position: relative;
    color: inherit;
    background: inherit;
    padding-left: 1px;
    padding-right: 1px;
}

p mark::before {
    position: absolute;
    content: "";
    display: inline-flex;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--site-color);
    opacity: 0.2;
    border-radius: 2px;
    z-index: -1;
}

<h2>Works when text is short</h2>
<p>Lorem ipsum dolor, sit <mark>adipisicing</mark> adipisicing elit. Debitis amet quasi deserunt possimus neque laborum, suscipit obcaecati quae pariatur quia sit provident, ipsum iusto quos, aliquid ut eveniet beatae ad!</p>

<br />

<h2>Does not work when text is long and start wrapping</h2>
<p>Lorem ipsum dolor, sit <mark>adipisicing elit. Debitis amet quasi deserunt possimus neque laborum, suscipit obcaecati quae pariatur quia sit provident, ipsum iusto quos, aliquid ut eveniet beatae ad! adipisicing elit. Debitis amet quasi deserunt possimus neque laborum, suscipit obcaecati quae pariatur quia sit provident, ipsum iusto quos, aliquid ut eveniet beatae ad!</mark> adipisicing elit. Debitis amet quasi deserunt possimus neque laborum, suscipit obcaecati quae pariatur quia sit provident, ipsum iusto quos, aliquid ut eveniet beatae ad!</p>

Tags: css

Answers

Use the new color-mix() to add opacity. What you want cannot be done with pseudo element:

:root {
  --site-color: #c026d3; /* Can't change this */
}

p mark {
  position: relative;
  color: inherit;
  background: inherit;
  padding-left: 1px;
  padding-right: 1px;
  /* adjust the percentage to control the opacity */
  background: color-mix(in srgb, var(--site-color), #0000 20%)
}

<h2>Works when text is short</h2>
<p>Lorem ipsum dolor, sit <mark>adipisicing</mark> adipisicing elit. Debitis amet quasi deserunt possimus neque laborum, suscipit obcaecati quae pariatur quia sit provident, ipsum iusto quos, aliquid ut eveniet beatae ad!</p>

<br />

<h2>Does not work when text is long and start wrapping</h2>
<p>Lorem ipsum dolor, sit <mark>adipisicing elit. Debitis amet quasi deserunt possimus neque laborum, suscipit obcaecati quae pariatur quia sit provident, ipsum iusto quos, aliquid ut eveniet beatae ad! adipisicing elit. Debitis amet quasi deserunt possimus neque laborum, suscipit obcaecati quae pariatur quia sit provident, ipsum iusto quos, aliquid ut eveniet beatae ad!</mark>  adipisicing elit. Debitis amet quasi deserunt possimus neque laborum, suscipit obcaecati quae pariatur quia sit provident, ipsum iusto quos, aliquid ut eveniet beatae ad!</p>

Until better browser support you can consider an overlay:

:root {
  --site-color: #c026d3; /* Can't change this */
}

p mark {
  position: relative;
  color: inherit;
  background: inherit;
  padding-left: 1px;
  padding-right: 1px;
  background: 
   /* use the same color as the main background with some opacity */
   linear-gradient(#fff5 0 0),
   var(--site-color)
}

<h2>Works when text is short</h2>
<p>Lorem ipsum dolor, sit <mark>adipisicing</mark> adipisicing elit. Debitis amet quasi deserunt possimus neque laborum, suscipit obcaecati quae pariatur quia sit provident, ipsum iusto quos, aliquid ut eveniet beatae ad!</p>

<br />

<h2>Does not work when text is long and start wrapping</h2>
<p>Lorem ipsum dolor, sit <mark>adipisicing elit. Debitis amet quasi deserunt possimus neque laborum, suscipit obcaecati quae pariatur quia sit provident, ipsum iusto quos, aliquid ut eveniet beatae ad! adipisicing elit. Debitis amet quasi deserunt possimus neque laborum, suscipit obcaecati quae pariatur quia sit provident, ipsum iusto quos, aliquid ut eveniet beatae ad!</mark>  adipisicing elit. Debitis amet quasi deserunt possimus neque laborum, suscipit obcaecati quae pariatur quia sit provident, ipsum iusto quos, aliquid ut eveniet beatae ad!</p>

This will not work in all browsers and you will need to check which ones. Ref: https://www.w3.org/TR/css-color-5/

Greatly simplifies and you may need to adjust the color. Here I used your site color and white #ffffff as the mix.

:root {
  --site-color: #c026d3;
  /* Can't change this */
}

p mark {
  background-color: color-mix(in srgb, #ffffff, var(--site-color));
}

<h2>Works when text is short</h2>
<p>Lorem ipsum dolor, sit <mark>adipisicing</mark> adipisicing elit. Debitis amet quasi deserunt possimus neque laborum, suscipit obcaecati quae pariatur quia sit provident, ipsum iusto quos, aliquid ut eveniet beatae ad!</p>

<br />

<h2>Does not work when text is long and start wrapping</h2>
<p>Lorem ipsum dolor, sit <mark>adipisicing elit. Debitis amet quasi deserunt possimus neque laborum, suscipit obcaecati quae pariatur quia sit provident, ipsum iusto quos, aliquid ut eveniet beatae ad! adipisicing elit. Debitis amet quasi deserunt possimus neque laborum, suscipit obcaecati quae pariatur quia sit provident, ipsum iusto quos, aliquid ut eveniet beatae ad!</mark>  adipisicing elit. Debitis amet quasi deserunt possimus neque laborum, suscipit obcaecati quae pariatur quia sit provident, ipsum iusto quos, aliquid ut eveniet beatae ad!</p>

Please signup or login to give your own answer.

Click here to cancel reply.