Den så kallade hr-taggen <hr> definierar en paus på en HTML-sida (t.ex. en förskjutning av ett stycke eller text). <hr>-taggen används för att seperera innehåll (eller definiera en förändring) på en HTML-sida. <hr>-taggen visas normalt som en rak linje över sidan men det går att designa på ett snyggt och enkelt sätt via CSS.
Här hittar du nio exempel på hur du kan styla om <hr>-taggen så det ser snyggt ut.
<hr>-tag Exempel 1
hr.style-ett {
border: 0;
height: 1px;
background: #333;
background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
background-image: -moz-linear-gradient(left, #ccc, #333, #ccc);
background-image: -ms-linear-gradient(left, #ccc, #333, #ccc); background-image: -o-linear-gradient(left, #ccc, #333, #ccc);
}
<hr>-tag Exempel 2
hr.style-tva {
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
}
<hr>-tag Exempel 3
hr.style-tre {
border: 0;
border-bottom: 1px dashed #ccc;
background: #FFFFFF;
}
<hr>-tag Exempel 4
hr.style-fyra {
height: 12px;
border: 0;
box-shadow: inset 0 12px 12px -12px rgba(0,0,0,0.5);
}
<hr>-tag Exempel 5
hr.style-fem {
border: 0;
height: 0;
/* För Firefox… */
box-shadow: 0 0 10px 1px black;
}
hr.style-fem:after { /* after för hr-taggen ska inte fungera egentligen eftersom hr-taggen inte har en slut-tag, men konstigt nog så fungerar det */
content: “\00a0”;
}
<hr>-tag Exempel 6
hr.style-sex {
border: 0;
height: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
<hr>-tag Exempel 7
hr.style-sju {
height: 6px;
background: url(https://tonys.se/wp-content/uploads/2018/11/hr-12.png) repeat-x 0 0;
border: 0;
}
<hr>-tag Exempel 8
hr.style-atta {
border: none;
border-top: 1px solid #a6cbe0;
height: 1px;
color: #a6cbe0;
background-color: #a6cbe0;
}
<hr>-tag Exempel 9
hr.style-nio {
padding: 0;
border: none;
border-top: medium double #333;
color: #333;
text-align: center;
}
hr.style-nio:after {
content: “♥ ♥ ♥”;
display: inline-block;
position: relative;
top: -0.7em;
font-size: 1.5em;
padding: 0 0.25em;
background: white;
}