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.

Read Also:  PHP laravel open new tab Example Tutorial

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:  Smooth Scroll to Top with jQuery

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.


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  jQuery AJAX Interview Questions and Answers
  2. Read Also:  How To Create a bootstrap vertical divider?
  3. Read Also:  Event binding on dynamically created elements?
  4. Read Also:  Laravel JSON Encode Decode Handling
  5. Read Also:  How To Create vertical line between columns using bootstrap?
  6. Read Also:  Bootstrap Toggle switch example
  7. Read Also:  Capture Webcam Image with PHP and jQuery
  8. Read Also:  PHP Ajax Form Validation without page refresh
  9. Read Also:  Jquery Angular conflict Solution Example
  10. Read Also:  Ajax Shopping Cart PHP MYSQLi Tutorial With Example
CLOSEX