Question 184187 in Html Question posted in
Some basic documentation can be found here.

Html – Ignoring first character, applying css to the remaining of an element

Is there a way to ignore the first character that resides in <p> and only apply inline styling to the remaining?

i.e. : Welcome

I want to make the word Welcome Red but the colon I want to ignore and leave it black

Is this possible?

I tried this but it makes the : and W Red.

p::first-letter {
  color: red;
}

p::after {
  content: ':';
  float: right;
}

p {
  color: black;
}
<p>:Welcome</p>
Tags:

2

Answers


  1. 0

    According to the docs:

    Punctuation that precedes or immediately follows the first letter is
    included in the match. Punctuation includes any Unicode character
    defined in the open (Ps), close (Pe), initial quote (Pi), final
    quote     (Pf), and other punctuation (Po) classes.

    – ::first-letter | MDN Web Docs

    This means selecting only the colon is not possible. You can, however, use a pseudo-element to create a inaccessible colon that precedes your actual content:

    p::before {
  content: ':';
  color: black;
}

p {
  color: red;
}
    <p>Welcome</p>

    …or wrap the colon inside an element:

    .colon {
  color: black;
}

p {
  color: red;
}
    <p><span class="colon">:</span>Welcome</p>
    Login or Signup to reply.
  2. 0

    If you have no other choice, and unfortunately you have to act on the scheme we adopted at the beginning, i.e. <p>:Welcome</p> then you have several options for this, I couldn’t come up with another that would be more consistent.

    There are many disadvantages with my concept, that is, it makes:

    • SEO visibility difficult, different crawlers will not be able to cope
      with something like this.
    • Doesn’t allow you to select text, you just can’t select it.

    However, it works and displays the text correctly.

    This CSS code applies styling to a paragraph element, as well as adds a pseudo-element ::after, ::first-letter and ::before with additional styling.

    p {
  font-weight: bold; /* makes the font bold */
  font-size: 2em; /* increases the font size to 2em */
  color: rgba(0, 0, 0, 0.0); /* sets the color to a transparent black using rgba */
  letter-spacing: -1em; /* sets the spacing between letters to -1em, effectively overlapping the letters */
}

p::after { /* adds text "Welcome" after the content of the paragraph element */
  content: "Welcome";
  color: black; /* sets the color of the text to blue */
  letter-spacing: 0px; /* sets the letter-spacing to 0px, removing the overlap of letters*/
}

p::first-letter { /* styles the first letter of the content of the paragraph element */
  color: red; /* sets the color of the first letter to red */
  letter-spacing: 0px; /* sets the letter-spacing to 0px, removing the overlap of letters*/
}

p::before { /* adds text ":" before the content of the paragraph element */
  content: ":";
  letter-spacing: 0px; /* sets the letter-spacing to 0px, removing the overlap of letters*/
}
    <p>:Welcome</p>

    If you have a better idea for eliminating unwanted text, as well as getting text selection back to work – write a comment.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search