Apply first 2 characters of string another styling

Question

Is it possible to style the first 2 characters of a message another styling?

::first-letter

Does not do the trick, also looked at this question, but this only hides the other ones.

Is it perhaps possible with the new pseudo elements? Or use the ch in combination with ::first-letter?

This is what I want to achieve but I have no clue how to do it with pure CSS.

NOTE, I can not change the HTML.

<h4 class="date">10 Mar. 2022</h4>

A first 2 character selector wouldn't help since `1 Mar. 2022` will break that. Don;t think this can be down with just CSS. Some JS would do the trick ofc. — 0stone0, Nov 08 '22 at 13:42
You can put the first two letters into a span and style it. example
10 Mar. 2022 — wissem maalel, Nov 08 '22 at 13:42

score 1 · Answer 1 · answered Nov 08 '22 at 13:48

This can't be done with pure CSS since there is no way of (dynamically) selecting the first 'word'.

Consider a javascript alternative that wraps the first part in an <em></em> that can be styled with some CSS.

const e = document.querySelector('.date');
const t = e.innerHTML.split(' ');

e.innerHTML = `<em class='up'>${t.shift()}</em> ${t.join(' ')}`

.up {
  color: darkblue;
  font-size: x-large;
  position: absolute;
  top: 5px;
  font-style: unset;
}

h4 {
  color: lightblue;
  margin-top: 30px;
}

<h4 class="date">10 Mar. 2022</h4>

score 0 · Answer 2 · answered Nov 08 '22 at 13:50

You can use a mixture of JS and css to achieve what you are looking for. First, just split the different parts (day/month/year) into different spans and add styling accordingly. An example as follows.

var text = $('.date').text();
var textArr = text.split(/\s+/);

$('.date').html(`<span class="day">${textArr[0]}</span>&nbsp;
                <span class="month">${textArr[1]}</span>&nbsp;
                <span class="year">${textArr[2]}</span>`);

.month {
  color: red;
}

.day {
  color: blue;
}

.year {
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h4 class="date">10 Mar. 2022</h4>

Apply first 2 characters of string another styling

10 Mar. 2022

2 Answers2