ligne horizontale et bonne façon de la coder en html, css

Question

Je dois dessiner une ligne horizontale après un bloc, et j'ai trois façons de le faire :

1) Définir une classe h_line et y ajouter des fonctionnalités css, comme

#css
.hline { width:100%; height:1px; background: #fff }

#html
<div class="block_1">Lorem</div> <div class="h_line"></div>

2) Utiliser hr étiquette

#css
hr { width:100%; height:1px; background: #fff }

#html
<div class="block_1">Lorem</div> <hr />

3) l'utiliser comme un after pseudo-classe

#css
.hline:after { width:100%; height:1px; background: #fff; content:"" }

#html
<div class="block_1 h_line">Lorem</div>

Quel est le moyen le plus pratique ?

Answer 1

Je voulais une longue ligne en forme de tiret, alors j'ai utilisé ceci.

.dash{
        border: 1px solid red;
        width: 120px;
        height: 0px;

}

<div class="dash"></div>

Answer 2

Ma solution la plus simple est de styliser l'objet avec du CSS pour qu'il n'ait pas de marges supérieure et inférieure, pas de bordure, une hauteur de 1 pixel et une couleur de fond contrastée. Cela peut être fait en définissant le style directement ou en définissant une classe, par exemple, comme :

.thin_hr {
margin-top:0;
margin-bottom:0;
border:0;
height:1px;
background-color:black;
}

Answer 3

Cela dépend des besoins, mais de nombreux développeurs suggèrent de rendre votre code aussi simple que possible. le plus simple possible . donc, allez-y avec une simple étiquette "hr". et un code CSS pour cela.

Answer 4

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

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

texte souligné

Answer 5

Cet exemple est relativement simple et a fonctionné pour moi.

hr {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

Ressource : https://www.w3docs.com/snippets/css/how-to-style-a-horizontal-line.html