0

I want to style only one character inside the content of an ::after. Is it possible? Considering that the div has content inside.

In this example I want the "↵" to be bold. But not the "press ENTER" text.

.div::after {
  content: "press ENTER ↵";
  font-size: 11px;
  color: #5a5b8d;
}
Nifel
  • 167
  • 1
  • 3
  • 12

3 Answers3

2

If there is no other text in the button, you could split your text in between the before and after:

.button {
  font-size: 11px;
  color: #5a5b8d;
}
.button::before {
  content: "press ENTER";
}
.button::after {
  content: " ↵";
  font-weight:bold;
}
<div class="button"></div>
Pete
  • 57,112
  • 28
  • 117
  • 166
  • 3
    That only works if there is no content in the button itself. – Mr Lister Nov 30 '18 at 10:11
  • @MrLister yeah I assumed there wasn't but should have asked for clarification, updated answer to reflect that – Pete Nov 30 '18 at 10:12
  • Unfortunately, there is no way to style certain characters in pseudo elements – Pete Nov 30 '18 at 10:15
  • 1
    What if its a div and not a button? That would make it go left and right. – Nifel Nov 30 '18 at 10:15
  • 1
    Err, the example uses a div – Pete Nov 30 '18 at 10:17
  • 1
    Which the answer states - if there is no content... Perhaps if you wanted a full solution you should show your html markup too in a [mcve] instead of making us guess at what your html is – Pete Nov 30 '18 at 10:19
  • 1
    @Nifel If this answer clashes with your requirements, please update the question. Nobody can solve problems you have if you don't tell us them. – Mr Lister Nov 30 '18 at 10:28
1

It's crazy, but this will work. Working example: http://jsfiddle.net/Lf8xvcyq/1/

Try this:

HTML:

<div class="button"></button>

CSS:

.button {
  /* Your normal CSS */
}

.button::first-letter {
  font-size: 11px;
  font-weight: bold;
  color: red;
}

.button::after {
  unicode-bidi:bidi-override;
  direction:rtl;
  content: "↵ RETNE sserp";
  font-size: 11px;
  color: blue;
}
wbdlc
  • 1,070
  • 1
  • 12
  • 34
-1

You can consider flexbox and the order property in case you will have content then you will be able to use both pseudo element:

button {
  font-size: 11px;
  color: #5a5b8d;
  display:flex;
}
button::before {
  content: "press ENTER";
  order:1;
  padding:0 2px; /*flexbox erase whitespace so we add padding*/
}
button::after {
  content: "↵";
  padding:0 2px;
  font-weight:bold;
  order:1;
}
<button >some content</button>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415