Çka është ndarësi i temës në gjuhën HTML?
Elementi <hr> në HTML e përfaqëson një ndarje tematike në mes elementeve të nivelit të paragrafit: për shembull, një ndryshim i temës në një artikull, ose të një zhvendosje të temës brenda një pjese të faqes.
Në të kaluarën është paraqitur elementi <hr> si një vijë horizontale për tu treguar si pamje në faqe. Edhe pse mund të shfaqet ende si element i pamjes, ky element tani përkufizohet në terma semantikë, në vend të termave projektues.
Nëse dëshironi të vizatoni një vijë horizontale, duhet ta bëni këtë duke përdorur kod të përshtatshëm CSS. Pa CSS, e vetmja etiketë e cila ju duhet është <hr />
HTML
<div class="container mbajtesi-me-ndares">
<h4>Rregullat e jetës:</h4>
<hr class="teksti-i-ndaresit" data-content="1">
<p>Mos mendo asnjë ditë për ditën e djeshme, ajo nuk ekziston më.</p>
<hr class="teksti-i-ndaresit" data-content="2">
<p>Mos dëgjo se çka thonë njërëzit tjerë, jeto jetën tënde.</p>
</div>
CSS
.mbajtesi-me-ndares hr {
border: none !important;
border-top: 1px solid #8c8b8b;
background-image: linear-gradient(to right, #f0f0f0, #8f8f8f, #f0f0f0);
overflow: visible;
text-align: center;
}
.mbajtesi-me-ndares hr::after {
background: #fff;
padding: 0 4px;
position: relative;
top: -16px;
}
.mbajtesi-me-ndares h4 {
margin: 20px auto;
text-align: center;
width: 200px;
font-size: 12px;
border: 1px solid rgba(111, 111, 111, 0.2);;
background-color:rgba(255, 255, 255, 0.4);
border-radius: 4px;
padding: 4px;
}
.mbajtesi-me-ndares p {
text-align: center;
margin-top: 20px;
margin-bottom: 40px;
}
.teksti-i-ndaresit {
line-height: 1em;
position: relative;
outline: 0;
border: 0;
color: #000;
text-align: center;
height: 1.5em;
opacity: .5;
}
.teksti-i-ndaresit:before {
content: '';
background: linear-gradient(to right, transparent, #818078, transparent);
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 1px;
}
.teksti-i-ndaresit:after {
content: attr(data-content);
position: relative;
display: inline-block;
height: 30px;
width: 30px;
border-radius: 100%;
border: 2px solid #8c8b8b;
color: #000;
padding: 0 .5em;
line-height: 1.5em;
color: #818078;
background-color: #fff;
}
