Is there a syntax to inherit the value of content in CSS and concatenate it?

Issue

I would like the content property to be concatenated instead of overriding.

<div class="bear"></div>

div::after {
  content: "hello";
}
.bear::after {
  content: " bear"; /* Here, I would like bear to be concatenated to "hello" instead of overriding it */
}

Solution

You can't 'inherit' the content as such but you can pick up a CSS variable value.

This snippet sets the variable --content in the div setting and uses that in the .bear pseudo element as well as the div pseudo element.

div::after {
  --content: "hello";
  content: var(--content);
}

.bear::after {
  content: var(--content) " bear";
  /* Here, I would like bear to be concatenated to "hello" instead of overriding it */
}

<div class="bear"></div>

Answered By - A Haworth