How can I create a horizontal line with or
, instead of
?

Question

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>

.

CreMedian · Accepted Answer

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!

Michael Benjamin · Answer

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>

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

Tags:

html

css

2 Answers

CreMedian

Michael Benjamin

Recent Activity

Donate For Us