css Question posted in
Some basic documentation can be found here.

Add seperate css styling for h2 text

I have this class:

.word-dealer-heading

and this is the text in the h2

Major Manufacturing Parts Industry

I want to apply separate style especially font-family in the CSS for the each above word.

The class name is already given

I can only apply in the CSS not add any HTML.

Tags:

2

Answers


  1. 0

    You can’t target specific words within css but what you could do if you have access to the content is use ::before and ::after pseudo elements to create this effect

    For example if you wanted to change the word ‘Manufacturing to be a different font you could do this

    <div class="word-dealer-heading">Manufacturing</div>

    and then for styling

    .word-dealer-heading {
  font-family: sans-serif;
}

.word-dealer-heading::before {
  font-family: arial;
  content: 'Major ';
}

.word-dealer-heading::after {
  font-family: arial;
  content: ' Parts Industry';
}
    Login or Signup to reply.
  2. 0

    Is this crazy? Sure.
    But it does fulfill your requirement of only touching CSS 🙂

    1. Create SVG that displays your text as desired
    2. Embed this SVG inside URL
    3. Hide the original HMTL text (e.g by using visibility: hidden)
    4. Use ::before or ::after elements to load the SVG as content in your css
    .word-dealer-heading {
  width: fit-content;
  height: fit-content;
  visibility: hidden
}

.word-dealer-heading::before {
  content: url('data:image/svg+xml;utf8,<svg  xmlns="http://www.w3.org/2000/svg"><text y="11" fill="red" font-size="16"><tspan fill="red">Foo</tspan><tspan fill="green">Bar</tspan></text></svg>');
  visibility: visible;
}
    <div class="word-dealer-heading">Foo Bar</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search