html - background-color on heading with pseudo-element -
I am trying to create a title with a trailing bar. I used the pseudo-element :: after .
My problem is the background color of the title, after the
:: post element that is located "located" at the top - but it is not.
HTML:
& lt; Div & gt; & Lt; H3 & gt; Test & lt; / H3 & gt; & Lt; P & gt; Blah blah blah blah blah blah blah blah blah & lt; / P & gt; & Lt; H3 & gt; Test 2 & lt; / H3 & gt; & Lt; P & gt; Blah blah blah blah blah blah blah blah blah & lt; / P & gt; & Lt; / Div & gt; CSS:
body {font-size: 0.9em; Font-family: aerial; } Div {width: 300px; Margin: 0 auto; } H3 {font-size: 200%; Background color: HSL (0, 0%, 100%); Margin: 0 px; Display: Inline-block; Padding-right: 20px; } H3 :: After {content: ''; Display area; Width: 300px; Height: 1.3rem; Background: HSL (200, 30%, 20%); Margin-top: -1.7rem; }
Position the pseudo-element exactly ... This is also cleaner CSS.
CSS
body {font-size: 0.9em; Font-family: aerial; } Div {width: 300px; Margin: 0 auto; } H3 {font-size: 200%; Background color: HSL (0, 0%, 100%); Margin: 0 px; Status: Relative; Hidden flurry; } H3 :: After {content: ''; Status: Completed; Width: 100%; Height: 100%; Margin-left: 20px; Background: HSL (200, 30%, 20%); }
Comments
Post a Comment