-2

Answers to this question show how to prepend/append text to a HTML element contents using CSS. Is there a way to make the CSS-added text bold without making the original HTML element contents bold as well?

Community
  • 1
  • 1
Ivan
  • 63,011
  • 101
  • 250
  • 382
  • While @StephenThomas has the correct answer, this is a VERY bad idea. Mixing content with formatting rules is not the proper way to do this. – Don Rhummy Jan 22 '14 at 22:52
  • 4
    After gathering 10K points on the site you should know that you have not researched enough to ask this question. Hint, look into pseudo-elements in CSS. – Jasper Jan 22 '14 at 22:52
  • 1
    -1 It would be better if you don't refer to other questions in your question but rather write a self contained one. It's time consuming for us that want to help you to jump back and forth and see what you mean. And in time it may become unreliable as to the number of answers or a slightly edited question resulting in different answers. So don't do that. – Robert Koritnik Jan 22 '14 at 22:55

4 Answers4

3

Sure:

.OwnerJoe:before {
  content: "Joe's Task:";
  font-weight: bold;
}
Stephen Thomas
  • 13,843
  • 2
  • 32
  • 53
1

Try:

#foo:after
{
    content: 'hello!';
    font-weight: bold;
}

Fiddle

SenorAmor
  • 3,351
  • 16
  • 27
1

Try this:

<div class="test">stuff</div>
.test{
border:1px solid #000;
}

CSS:

.test:before {
content: "more stuff";
background:red;
font-weight:bold;    
}

Fiddle

All the information was in the link you posted, by the way. You just needed to add the font-weight to the right area.

Hiigaran
  • 829
  • 10
  • 28
1

That is of course possible

Just set appropriate styles to your pseudo element.

<span>World</span>

And the CSS:

span:before {
    content: "Hello";
    font-weight: bold;
}

Here's a working JSFiddle.

Robert Koritnik
  • 103,639
  • 52
  • 277
  • 404