Şu Bileşeni Nasıl Yaparım? [HTML & CSS]

Vakti zamanında bir sitede görmüştüm. Şimdi ise kendime bir tema yapıyorum. Photoshop ile çizdim fakat kodlarken ufak tefek sorunlar ile karşılaştım.

Öncelikle Popüler Konular başlığının arkasına bir türlü çizgiyi ekleyemedim. https://fatihhayrioglu.com/resim-kul...ar-olusturmak/ adresindekilerin aynısını yapmama rağmen Başlık alandan yukarı çıkıyor ve yarısı görünüyor.

İkinci sorunum ise soluk olan sıra sayıları. Rastladığım ise o sayıları CSS dosyasından content özelliğiyle çekiyor diye hatırlıyorum. Bu sayede fare imlecine falan takılmıyordu. Fakat siteyi bir türlü bi daha bulamadım ve nasıl yapacağıma dair bir fikrim yok.

Bir arkadaş bu konu hakkında yardımcı olursa çok sevineceğim.

Soluk sıra dediğiniz after, before hocam internette bulabilirsiniz örneklerini.
Çizgiye gelince hr etiketi ile direkt bi çizgi oluşturabilrsiniz divi kapsayan yerin en altına

sayma işlemi ;
https://www.w3schools.com/css/css_counters.asp

başlık;

https://codepen.io/anon/pen/EeovXE

item{
position:relative;
}
item:after{
position:absolute;
content:"";
height:1px;
width:30%;
border-bottom:1px solid #000;
right:0;
top:50%;
}

ile yazının yanına çizgi ekleyebilirsin.

div {
    -webkit-user-select: none; /* Safari 3.1+ */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard syntax */
}

Bunla da mousenin seçmesini engelleyebilirsin.

Tüm arkadaşlara teşekkür ederim. Biraz uğraştıktan sonra istediğim gibi olacak sanırım.

HTML & CSS konusunda takıldığınız yerde bana PM yoluyla ulaşabilirsiniz. Ayrıca BU KONUda yaptığım çalışmalara bir göz atın derim. Kendi tasarımınız olan bir manşet veya konu içi resim galerisi yaptırabilirsiniz.