CSS Create Middle Border Line After Text Example

Today, We want to share with you CSS Create Middle Border Line After Text Example.In this post we will show you horizontal line before text css, hear for horizontal line with text in middle word we will give you demo and example for implement.In this post, we will learn about How to style a heading with horizontal lines either side using CSS with an example.

CSS Create Middle Border Line After Text Example

There are the Following The simple About CSS Create Middle Border Line After Text Example Full Information With Example and source code.

As I will cover this Post with live Working example to develop Create line after text with css, so the css vertical line before text for this example is following below.

Example 1: Create Headings with Lines in CSS

HTML Part

<h2>Featured products</h2>
<h2>Here is a very long h2, and as you can see the line get too wide</h2>
<h2>Example</h2>
<h2>Demo</h2>

CSS Part

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: 2px solid #195279;
}

Example 2: CSS Line-On-Sides Headers

HTML Part

<div class="wrapper">
  <p>Example</p>
  <div class="line"></div>
</div>

CSS Part

.wrapper {
  display: flex;
  align-items: center;
}

.line {
  border-top: 3px solid red;
  flex-grow: 1;
  margin: 0 10px;
}

Example 3: CSS line behind title text

HTML Part

<h2 class="background">horizontal line before text css</h2>
<h2 class="background"><span>css dotted line after text</span></h2>
<h2 class="background headerpart"><span>Create a colored border around text with HTML and CSS
</span></h2>
<h2 class="no-background"><span>How To Make Horizontal Lines In Html And CSS</b></span></h2>
<h2 class="no-span">horizontal line with text in middle word</b></h2>

CSS Part

h2 {
    font: 33px sans-serif;
    margin-top: 30px;
    text-align: center;
    text-transform: uppercase;
}

h2.background {
    position: relative;
    z-index: 1;
    
    &:before {
        border-top: 2px solid #dfdfdf;
        content:"";
        margin: 0 auto; 
        position: absolute;
        top: 50%; left: 0; right: 0; bottom: 0;
        width: 95%;
        z-index: -1;
    }

    span { 
        background: #fff; 
        padding: 0 15px; 
    }
}

h2.headerpart:before { 
    border-top: none; 
}

h2.headerpart:after {
    border-bottom: 1px solid blue;
    -webkit-box-shadow: 0 1px 0 0 red;
    -moz-box-shadow: 0 1px 0 0 red;
    box-shadow: 0 1px 0 0 red;
    content: "";
    margin: 0 auto;
    position: absolute;
    top: 45%; left: 0; right: 0;
    width: 95%;
    z-index: -1;
}

h2.no-background {
    position: relative;
    overflow: hidden;
    
    span {
        display: inline-block;
        vertical-align: baseline;
        zoom: 1;
        *display: inline;
        *vertical-align: auto;
        position: relative;
        padding: 0 20px;

        &:before, &:after {
            content: '';
            display: block;
            width: 1000px;
            position: absolute;
            top: 0.73em;
            border-top: 1px solid red;
        }

        &:before { right: 100%; }
        &:after { left: 100%; }
    }
}

h2.no-span {
    display: table;
    white-space: nowrap;
    &:before, &:after {
      border-top: 1px solid green;
      content: '';
      display: table-cell;
      position: relative;
      top: 0.5em;
      width: 45%;
    }
    &:before { right: 1.5%; }
    &:after { left: 1.5%; }
}

Angular 6 CRUD Operations Application Tutorials

Read :

Read Also:  jQuery Get Dynamic Element Selector Finding ID

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about CSS Create Middle Border Line After Text Example.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.