Content of after in css, how to split text into two styles

Question

I have following code:

.button { 
   &[aria-label*='first']::after { content: 'some text'; } 
}

It checks if button has aria-label and if it is 'first', it will append 'some text'. I would like to style 'some text' with colors , but 'some' to have black color, and 'text' to have red color. Is that possible and how?

Possible duplicate of [CSS content property: is it possible to insert HTML instead of Text?](https://stackoverflow.com/questions/4505093/css-content-property-is-it-possible-to-insert-html-instead-of-text) — Heretic Monkey, Jun 28 '17 at 14:26
@PraveenKumar Thank you for that reasoned argument for why this is not a duplicate. — Heretic Monkey, Jun 28 '17 at 14:27
Why not just use `:before` and `:after`? https://codepen.io/anon/pen/owpZoX — Michael Coker, Jun 28 '17 at 14:30
You could split the text content into `::before` and `::after` — sol, Jun 28 '17 at 14:30
@MikeMcCaughan Sorry mate, see my answer for why it is not a duplicate. — Praveen Kumar Purushothaman, Jun 28 '17 at 14:31
@MikeMcCaughan This is not about why can't HTML content be included. But this is totally different. — Praveen Kumar Purushothaman, Jun 28 '17 at 14:32
@MikeMcCaughan Thanks for not understanding the question clearly. Not your fault though... `:)` — Praveen Kumar Purushothaman, Jun 28 '17 at 14:33
I did understand the question, and your answer just shows using both after and before to solve this specific issue. My duplicate covers any basis, not just two different styles. — Heretic Monkey, Jun 28 '17 at 14:53
@MikeMcCaughan You are kinda right... Please kindly check my answer's comments too! `:)` Thanks BTW. — Praveen Kumar Purushothaman, Jun 28 '17 at 14:58

score 0 · Accepted Answer · answered Jun 28 '17 at 14:30

0

Although you can't use HTML content in the pseudo elements, well, as an alternative, you can use both ::after and ::before for this case. But please note, there are only those two. So, this is the way you go:

.button[aria-label*='first']::after {
  position: relative;
  content: 'some';
  left: 1em;
  color: #fcc;
}

.button[aria-label*='first']::before {
  position: relative;
  content: 'text';
  left: 6.5em;
  color: #ccf;
}

<div class="button" aria-label='first-button'>Hi</div>

Better way:

.button[aria-label*='first']::after {
  content: 'some';
  color: #f00;
}

.button[aria-label*='first']::before {
  content: 'text';
  color: #ccf;
}

<button class="button" aria-label='first-button'></button>

answered Jun 28 '17 at 14:30

Praveen Kumar Purushothaman

154,660
22
177
226

1

You actually can use HTML in the `content` property, kind of...here is an answer of mine: https://stackoverflow.com/a/36073310/2827823 – Ason Jun 28 '17 at 14:36
Nice, but I already have 'before' occupied with image &::before { content: url('../../assets/icon.png'); } , so I tried this it is working, but it replaces my image. Can you tell me how to put both image and this part of the text, and I will accept your answer. Thanks! – Vikast Jun 28 '17 at 14:38
@Vikast Ha! Like I have told you already, you can have only two pseudo elements. In your case, I guess, you gotta follow the trick used by LGSon by his answer. You take the call. I guess it is better that way. – Praveen Kumar Purushothaman Jun 28 '17 at 14:39

Content of after in css, how to split text into two styles

1 Answers1