html - How do I control the spacing of the bottom border? -
i want accomplish 2 thing here:
1) i'd control spacing of bottom border. there way have bottom border show 5 pixels down below type? 2) also, word "enhance" in bold. first word in example should bold.
here's jsfiddle: http://jsfiddle.net/m9zlj27j/6/
here's code:
h1 { font-family:helvetica, arial; font-size:1.6em; text-transform:uppercase; font-weight:normal; margin-bottom:-5px; } h1.section-title { font-family: helvetica, arial; font-size:32px; font-weight: normal; margin: 50px 0; border-bottom: 1px dotted #f66511; } h1.section-title-bold { font-weight: bold; } .rtecenter { text-align: center; } .blue { color: #2251a4; }
<h1 class="section-title rtecenter blue"> <span class="section-title-bold">enhance</span> search</h1>
try it,
1) can control spacing using padding. 2) , bold done make space between class h1 .section-title-bold
h1 { font-family:helvetica, arial; font-size:1.6em; text-transform:uppercase; font-weight:normal; margin-bottom:-5px; } h1.section-title { font-family: helvetica, arial; font-size:32px; font-weight: normal; margin: 50px 0; border-bottom: 1px dotted #f66511; padding-bottom:5px; } h1 .section-title-bold { font-weight: bold; } .rtecenter { text-align: center; } .blue { color: #2251a4; }
<h1 class="section-title rtecenter blue"> <span class="section-title-bold">enhance</span> search </h1>
Comments
Post a Comment