-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?

Improve this question
3
  • 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
    Commented Jan 22, 2014 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
    Commented Jan 22, 2014 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
    Commented Jan 22, 2014 at 22:55

4 Answers 4

Reset to default
3

Sure:

.OwnerJoe:before {
  content: "Joe's Task:";
  font-weight: bold;
}
Improve this answer
0
1

Try:

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

Fiddle

Improve this answer
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.

Improve this answer
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.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.