Search code examples
cssblogger

I want to make blogger H2,H3,H4 background confined to text size

enter image description hereI use blogger and I have CSS for H2,3,4 tags with special background and text size. I want the background size to fit the text size automatically and not to be the whole width of the page.

Can anyone help me with another code or css trick to make it work?

I replaced "display: block;" with "display: inline-block" and it worked but with problems as shown on image no. 2.

.post-body h3,.post-body h2,.post-body h4{background-color:#333333;width: auto;padding:10px 20px;color:#FFF;display: block;margin:5px 0 15px;border-bottom:1px solid $(post.line)}

xxx

xxxx

Solution

  • If heading element comes inside a text or between inline elements, you can use display: table

    h2 {
  display: table;
  background: tomato;
}
    
    <h2>Lorem ipsum dolor sit amet</h2>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>


<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor <h2>Lorem ipsum dolor sit amet</h2> laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>