CODEWITHSUNDEEP
css
Fla
Fla

Reputation: 647

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

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 */
}

Upvotes: 0

Views: 68

Answers (1)

A Haworth
A Haworth

Reputation: 36574

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>

Upvotes: 1

Related Questions