Простой пример
<head>
<style>
.text {
font-size: 18px;
margin-left: 2em;
}
p {
margin-bottom:1em;
}
.anchor{
position: relative;
scroll-margin-top: 2rem;
}
.anchor::before {
content: "#" attr(id);
color: #888;
font-family: Arial;
font-size: 0.8em;
/* font-weight: bold; */
position: absolute;
display: block;
left: -2rem;
top: -1em;
padding-right: 0.5em;
}
</style>
</head>
<body>
<div class='text'>
<p>
Текст Текст Текст Текст Текст Текст Текст Текст <br>
Текст Текст Текст Текст Текст Текст Текст Текст <br>
Текст Текст Текст Текст Текст Текст Текст Текст <br>
Текст Текст Текст Текст Текст Текст Текст Текст <br>
Текст Текст Текст Текст Текст Текст Текст Текст <br>
</p>
<h3 id='Zagolovok' class='anchor'> Заголовок </h3>
<p>
Текст Текст Текст Текст Текст Текст Текст Текст <br>
Текст Текст Текст Текст Текст Текст Текст Текст <br>
Текст Текст Текст Текст Текст Текст Текст Текст <br>
Текст Текст Текст Текст Текст Текст Текст Текст <br>
Текст Текст Текст Текст Текст Текст Текст Текст <br>
Текст Текст Текст Текст Текст Текст Текст Текст <br>
Текст Текст Текст Текст Текст Текст Текст Текст <br>
Текст Текст Текст Текст Текст Текст Текст Текст <br>
Текст Текст Текст Текст Текст Текст Текст Текст <br>
Текст Текст Текст Текст Текст Текст Текст Текст <br>
</p>
</div>
</body>
Очень надо выделить '#Zagolovok'
Как быть то?