CSS Text-Transform Selector

Question

This is my code

<li class="nav-item">
        <a href="" class="nav-link" id="welcome">Welcome, {{request.user}}</a>
    </li>

Is there a way of selecting the first letter of the user's name and capitalizing it with just CSS? Is it possible to do this in a way similar to selecting the first-letter and using the text-transform command?

Thank you in advance for any help. I'm new to web design and trying to avoid Javascript until I'm comfortable with CSS.

have you try using text-transform: capitalize ?

imste
– imste

2021-02-17 18:04:53 +00:00
Commented Feb 17, 2021 at 18:04 — imste
– imste, Commented Feb 17, 2021 at 18:04

Paulie_D · Accepted Answer · 2021-02-17 18:01:48Z

1

No. You can do :first-letter but it has to be the actual first letter.

The ::first-letter CSS pseudo-element applies styles to the first letter of the first line of a block-level element, but only when not preceded by other content (such as images or inline tables).

So wrap the username in a span and try this:

a {
 text-decoration:none;
  color:grey;
}

ul {
  list-style:none;
}

span {
  display: inline-block;
}

a span:first-letter {
  text-transform:uppercase;
  color:red;
}

<ul><li class="nav-item">
        <a href="" class="nav-link" id="welcome">Welcome, <span>username</span></a>
    </li></ul>

answered Feb 17, 2021 at 18:01

Paulie_D

116k13 gold badges168 silver badges185 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS Text-Transform Selector

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related