CODEWITHSUNDEEP
htmlcss
user5136561
user5136561

Reputation:

How can I create a horizontal line with <span> or <div>, instead of <hr>?

I would like to know how I can make the tag <hr> effect with the tag <span> or <div>.

I see in large websites the horizontal lines, but they do not use the <hr> tag.

<!DOCTYPE html>
<html lang="pt-Br">
  <head>
    <title> H - Line </title>
   </head>
 <body>
    <hr/>
 </body>
</html>

.

Upvotes: 4

Views: 22624

Answers (5)

Santanu
Santanu

Reputation: 21

Just add this CSS to the span tag:

span {
  display: block;
  height: 2px;
  background: rgb(0, 102, 255);
}

Upvotes: 0

Martijn
Martijn

Reputation: 16103

I use a div as it behaves like anHR (they're both block). Then there are two routes. The first is giving the div an height of 1px (or 2 or 3, what you like) and add a margin. The other is a height of 0 with a border.

.hr1 {
    height: 1px;
    background: blue;
}

.hr2 {
    height: 0;
    border-bottom: 1px solid green;
}
<p>some text</p>
<div class="hr1"></div>
<p>some text</p>
<div class="hr2"></div>
<p>some text</p>

The fun part is that you can add all kinds of tricks now. You can use a gradient, add shadows, transform them a bit. It offers a lot of room for creativity

Upvotes: 0

James Hilditch
James Hilditch

Reputation: 61

Well, this is a good question. First of all, you could use hr, then style it. If this is no help, what about a svg? I looked at a codepen and this is the best code i could get, you could edit the color and everything, this is just basics.

.path2 {
  stroke-dasharray: 1120;
/*   stroke-dashoffset: 800; */
  animation: draw1 1s linear alternate;
}

@keyframes draw1 {
  from {
    stroke-dashoffset: 1120;
  }
  to {
    stroke-dashoffset: 2240;
  }
}
<svg version="1.1" id="line_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1200px" height="5px" xml:space="preserve">
  <path class="path2" fill="#01a09e" stroke-width="3" stroke="#01a09e" d="M0 0 l1120 0"/>
</svg>

Also - this has a slight animation to it, remove this with 'keyframes' in the css. Hope i helped, one way i've used for a while now.

Upvotes: 0

CreMedian
CreMedian

Reputation: 803

you can use any other HTML tag, define it as follows:

span{
   display:block;
   width:100% /*or whatever width you want the effect of <hr>*/
   border-top: 1px solid #ccc
}

Note you could use border-bottom or border-top and make it any color you want (#ccc resembles the hairline tag pretty well)

Good luck!

Upvotes: 7

Michael Benjamin
Michael Benjamin

Reputation: 371221

First, <hr> can be styled with CSS.

hr {
    height: 12px;
    border: 0;
    box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
}

Code above courtesy of CSS-Tricks.com. See more examples.

Whenever possible, you should stick to horizontal rules for their semantic value. Simply because "large websites" don't use hr tags doesn't mean it's the wrong thing to do, especially since the reasons they don't use them are unknown.

If you want to avoid using <hr> tags, then consider CSS border properties.

div {
  height: 50px;
  border-bottom: 2px solid black;
}
<div></div>

Upvotes: 4

Related Questions