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

Popular posts from this blog

java - ImportError: No module named py4j.java_gateway -

python - Receiving "KeyError" after decoding json result from url -

.net - Creating a new Queue Manager and Queue in Websphere MQ (using C#) -