Question 190187 in CSS Question posted in
Some basic documentation can be found here.

Css – Select and format two more characters. How?

<p><em>meta key here</em>:: meta value here</p>

i, em {
  color: red;
  font-size: 80%;
  font-style: italic;
}

I want to format the next two colon characters same as the <em> element.

I can format with CSS, but I can’t add more HTML tags in the source.

Tags:

2

Answers


  1. 0

    The only way to do what you are asking for without javascript is to define :: as pseudo element’s content

    CSS has no way of selecting certain number of chars of certain element, you can only select first letter

    There are more ways to go around this obviously, but you’d need to add more elements in html for this

    So this is actually the only option you have

    i, em {
  color: red;
  font-size: 80%;
  font-style: italic;
}
em:after {
  content: '::';
  color: green;
}
    <p><em>meta key here</em> meta value here</p>
    Login or Signup to reply.
  2. 0

    CSS pseudo elements can solve this problem, here is the details of Before pseudo element.

    i, em {
  color: red;
  font-size: 80%;
  font-style: italic;
}

em::after {
  content: ' :: ';
  color: red;
  font-size: 80%;
  font-style: italic;
  font-weight: 900;
}
    <p><em>meta key here</em>meta value here</p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search