🥇 Adicionar âncoras aos títulos das seções

É realmente uma boa prática de experiência do usuário adicionar âncoras aos títulos das seções. Isso ajuda os usuários a criar um link para uma parte do artigo. Você pode ver um bom exemplo disso nos arquivos README no Github. Aqui está uma amostra .

Normalmente vinculamos a <a>tag a um elemento usando o idatributo, mas isso não é compatível com sites ASP. Em vez de usar id, podemos usar o nameatributo:

<a name="about" href="#about">About</a>

É um link que aponta para si mesmo. É um título de seção, portanto, você também deve envolvê-lo em uma tag h2ou h3.

Opcionalmente, podemos adicionar algum estilo para links de âncora:

[href^="#"] {
    position: relative;
    color: inherit;
}

[href^="#"]:hover {
    color: #e14a42;
}

[href^="#"]:hover:before {
    content: '#';
    right: 100%;
    position: absolute;
    margin-right: .2em;
}

Confira a página de demonstração .

O original está no meu blog .

Related Posts