CODEWITHSUNDEEP
csstextformatting
rajesh
rajesh

Reputation: 1485

How to set font-weight bold in html?

HTML

<div class="test">Bold Text. Normal Text</div>

Expected Output:

Bold Text. Normal Text

I know to add <b> for certain text. But the condition here is not to edit the HTML page. By using CSS or jquery need to set the certain text as bold.

Thanks in advance...

Upvotes: 0

Views: 1371

Answers (3)

cyadvert
cyadvert

Reputation: 875

JQuery. Get text, split by dot, wrap with <span> and put back. Apply CSS onto first <span>. (run the snippet)

var t = $('.test').html().split('.');
var res = '<span>' + t[0] + '.</span><span>' + t[1] + '</span>';

$('.test').html(res);
.test>span:first-child {
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">Bold Text. Normal Text</div>

Upvotes: 0

Jack hardcastle
Jack hardcastle

Reputation: 2875

<div class="test">Bold Text. Normal Text</div>

.test {
    font-size:0;
 }

.test:before {
    font-size: 12px;
    content: "Bold Text. ";
    font-weight: bolder;
}

.test:after {
    font-size: 12px;
    content: "Normal Text";
}

http://jsfiddle.net/td92r3jz/

Fiddle.

Upvotes: 3

Ernie
Ernie

Reputation: 1000

You could hide the text in your original div with css, and use the :before and :after css-selector to add the text again with css

div {
    line-height:1000px;
    overflow:hidden;
    height:30px;
}

div:after {
    content:"bold text";
    position:absolute;
    font-weight: bold;
}

div:before {
    content:"normal text";
    position:absolute;
    font-weight: normal;
}

Upvotes: -2

Related Questions