Selection after the tag

Hi everyone, I have this HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>

<p><em>key</em>:: value</p>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>

<p><em>key</em>:: value</p>

</body>
</html>

I can't touch the HTML just the CSS, I want to format the two colon after the </em>. Thamks

9 Replies

Jochem•5mo ago

you can't, not without also formatting the " value" bit

srobot1974•5mo ago

😭

Chris Bolson•5mo ago

AS Jochem says, you can't format them without formatting the "value". (unless you use JS of course) However you could add a pseudo element to hide them and add your own content. Something like this might work. It depends on exactly what it is you want to do.

em{
  position:relative;
}
em::after{
  content: '::';
  background: white;
  position: absolute;
  color: red;
}

em{
  position:relative;
}
em::after{
  content: '::';
  background: white;
  position: absolute;
  color: red;
}

Jochem•5mo ago

that's a good call

srobot1974•5mo ago

I use exactly this previously, but the background changing now many times (sometimes blue, sometimes green, etc.), so it's not working properly.

clevermissfox•5mo ago

Change bg to inherit ?

MarkBoots•5mo ago

maybe something like this https://codepen.io/MarkBoots/pen/OJGEvKG

MarkBoots•5mo ago

srobot1974•5mo ago

Interesting idea, especially when the text more than 1 line long. If the paragraph don't have background the emphesise don't inherit the background and I don't know what colour I get under the paragraph.

Gaming

Programming

Selection after the tag