Create line after text with css

Question

Im trying to make a line after each of my h2 tags  I can  t figure out how I should tell the width  cause the lenght of the h2 headlines is differ from h2 to h2   I use the  after method to create lines         h2 after          position  absolute         content             height  2px         background-color   242424         width  50          margin-left  15px         top  50               Check code here  http   jsfiddle net s9gHf  As you can see the line get too wide  and make the website too wide

User · Answer

This is the most easy way I found to achieve the result: Just use hr tag before the text, and set the margin top for text. Very short and easy to understand! jsfiddle

_x000D_

h2 {_x000D_
  background-color: #ffffff;_x000D_
  margin-top: -22px;_x000D_
  width: 25%;_x000D_
}_x000D_
_x000D_
hr {_x000D_
  border: 1px solid #e9a216;_x000D_
}

_x000D_

<br>_x000D_
_x000D_
<hr>_x000D_
<h2>ABOUT US</h2>

_x000D_

User · Answer

Here is how I do this  http   jsfiddle net Zz7Wq 2   I use a background instead of after and use my H1 or H2 to cover the background  Not quite your method above but does work well for me   CSS    title-box   background   fff url  images bar-orange jpg   repeat-x left  text-align  left  margin-bottom  20px    title-box h1   color   000  background-color   fff  display  inline  padding  0 50px 0 50px      HTML   lt div class  title-box  gt  lt h1 gt Title can go here lt  h1 gt  lt  div gt   lt div class  title-box  gt  lt h1 gt Title can go here this one is really really long lt  h1 gt  lt  div gt

User · Answer

using flexbox   h2       display  flex      align-items  center      h2 span       content         flex  1 1 auto      border-top  1px solid  000      html    lt h2 gt Title  lt span gt  lt  span gt  lt  h2 gt

User · Answer

You could achieve this with an extra  lt span gt     HTML   lt h2 gt  lt span gt Featured products lt  span gt  lt  h2 gt   lt h2 gt  lt span gt Here is a very long h2  and as you can see the line get too wide lt  span gt  lt  h2 gt    CSS  h2       position  relative     h2 span       background-color  white      padding-right  10px     h2 after       content         position  absolute      bottom  0      left  0      right  0      height  0 5em      border-top  1px solid black      z-index  -1      http   jsfiddle net myajouri pkm5r   Another solution without the extra  lt span gt  but requires an overflow  hidden on the  lt h2 gt    h2       overflow  hidden     h2 after       content         display  inline-block      height  0 5em      vertical-align  bottom      width  100       margin-right  -100       margin-left  10px      border-top  1px solid black      http   jsfiddle net myajouri h2JRj

User · Answer

I am not experienced at all so feel free to correct things  However  I tried all these answers  but always had a problem in some screen  So I tried the following that worked for me and looks as I want it in almost all screens with the exception of mobile   lt div class  quot wrapper quot  gt      lt div id  quot Section-Title quot  gt        lt div id  quot h2 quot  gt  YOUR TITLE          lt div id  quot line quot  gt  lt hr gt  lt  div gt        lt  div gt      lt  div gt   lt  div gt   CSS   wrapper  background  fff  max-width 100   margin 20px auto  padding 50px 5      Section-Title  margin  2  auto  width 98   overflow  hidden     h2  float left  width 100   position relative  z-index 1  font-family Arial  Helvetica  sans-serif  font-size 1 5vw     h2  line   display inline-block  float right  margin auto  margin-left 10px  width 90   position absolute  top -5      Section-Title after content  quot  quot   display block  clear both     wrapper after content  quot  quot   display block  clear both

User · Answer

Here is another  in my opinion even simpler solution using a flex wrapper   HTML    lt div class  wrapper  gt     lt p gt Text lt  p gt     lt div class  line  gt  lt  div gt   lt  div gt    CSS    wrapper     display  flex    align-items  center      line     border-top  1px solid grey    flex-grow  1    margin  0 10px      JSFiddle

User · Answer

There s no need for extra wrappers or span elements anymore  Flexbox and Grid can handle this easily    x000D   x000D  h2   x000D    display  flex  x000D    align-items  center  x000D    x000D   x000D  h2  after   x000D    content      x000D    flex  1  x000D    margin-left  1rem  x000D    height  1px  x000D    background-color   000  x000D    x000D   lt h2 gt Heading lt  h2 gt  x000D   x000D   x000D

[css] Create line after text with css

Examples related to css