CODEWITHSUNDEEP
css
Azertit
Azertit

Reputation: 102

Apply first 2 characters of string another styling

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. enter image description here

NOTE, I can not change the HTML.

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

Upvotes: 0

Views: 997

Answers (2)

joohong89
joohong89

Reputation: 1271

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>

Upvotes: 0

0stone0
0stone0

Reputation: 43904

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

Consider a 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>

Upvotes: 1

Related Questions