Horizontal Line and Right Way to Code It in HTML, CSS

horizontal line and right way to code it in html, css

hr {    display: block;    height: 1px;    border: 0;    border-top: 1px solid #ccc;    margin: 1em 0;    padding: 0;}

<div>Hello</div><hr/><div>World</div>

CSS technique for a horizontal line with words in the middle

This is roughly how I'd do it: the line is created by setting a border-bottom on the containing h2 then giving the h2 a smaller line-height. The text is then put in a nested span with a non-transparent background.

h2 {   width: 100%;    text-align: center;    border-bottom: 1px solid #000;    line-height: 0.1em;   margin: 10px 0 20px; } 
h2 span {     background:#fff;     padding:0 10px; }

<h2><span>THIS IS A TEST</span></h2><p>this is some content other</p>

How to create a partial-horizontal line in HTML?

In your example this is done with css and not with a hr-tag
So either you can use the css-style border-bottom as in your example, or you indeed can use a hr-tag which you give some CSS, e.g.:

<hr style="width:40%">

If you want to position the hr, you may need the position-style.
You can try this easily on the w3c example site.

Remember, that the hr-width-attribute (not the style!) is not working under html5 anymore.

html page design with horizontal line and vertical line

Try this

CSS:

body,html{
    height:100%;
}
.flex{
    display:flex;
    height:100%;
}

.flex-wrap{
    flex-wrap:wrap;
}

.bottom-border{
    border-bottom:1px solid; 
}

.top-border{
    border-top:1px solid; 
 }

 .side{
     width:50%;
     height:100%;
 }

 .left-side{
     border-right:1px solid; 
     width:calc(50% - 1px);
 }

 .element{
     height:30%;
     width:100%;
 }

 .margin-top-auto{
     margin-top:auto;
 }

HTML:

<div class="flex flex-wrap">
  <div class="side left-side">
      <div class="bottom-border element">
        30%
      </div>
  </div>
  <div class="side flex">
      <div class="top-border element margin-top-auto">
        30%
      </div>
  </div>
</div>

JSFiddle:

https://jsfiddle.net/e3j2oh4q/

How to make a vertical line in HTML

Put a <div> around the markup where you want the line to appear to next, and use CSS to style it:

.verticalLine {  border-left: thick solid #ff0000;}

<div class="verticalLine">  some other content</div>

How do i add an horizontal line using html and css in bootstrap 4

You can use the ::after like this:

HTML:

<h1 class="text-center with_underline">STYLISH AXURE DESIGN</h1>       

CSS:

.with_underline::after{
  content: "";
  height: 3px;
  width: 120px;
  background: red;
  display: block;
  margin: 0 auto;
  margin-top: 10px;
}

Here's the fiddle: https://jsfiddle.net/43e6r07m/

---

Related Topics