Aby usunąć podkreślenie hiperłącza w HTML, należy użyć właściwości CSS text-decoration: none. Poniżej znajdziesz szczegółowy poradnik z wyjaśnieniem oraz praktycznymi przykładami możliwych zastosowań – od usuwania podkreślenia we wszystkich linkach, przez stylizowanie pojedynczych odnośników, po efekty wyłącznie na określone stany (np. po najechaniu kursorem).
Usuwanie podkreślenia z wszystkich linków na stronie
Najprostszą metodą jest zastosowanie reguły CSS do wszystkich elementów <a>, czyli:
a { text-decoration: none; } Ta reguła sprawi, że wszystkie hiperłącza na stronie HTML nie będą miały podkreślenia.
Przykład HTML –
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Usuwanie podkreślenia z linków</title>
<style>
a { text-decoration: none; }
</style>
</head>
<body>
<a href="https://example.com">Przykładowy link</a>
</body>
</html>
Usuwanie podkreślenia tylko z wybranych linków
Często zależy nam, aby nie wszystkie linki były niepodkreślone – wtedy używamy klas lub identyfikatorów.
Przykład CSS –
.nopodkreslenia { text-decoration: none; } Przykład HTML –
<a href="https://example.com" class="nopodkreslenia">Link bez podkreślenia</a>
<a href="https://example.com">Link domyślny (podkreślony)</a>
Podkreślenie tylko po najechaniu myszką (hover)
Aby hiperłącze było niepodkreślone na co dzień, ale podkreślało się po najechaniu kursorem, można wykorzystać pseudoklasę :hover.
Przykład CSS –
a { text-decoration: none; color: #0072d6; }
a:hover { text-decoration: underline; }
Działanie – linki na stronie będą bez podkreślenia, ale po najechaniu myszy pojawi się podkreślenie – zwiększa to czytelność i sygnalizuje interaktywność.
Usuwanie podkreślenia z wykorzystaniem stylu bezpośrednio w znaczniku
Ten sposób jest mniej zalecany, ponieważ utrudnia zarządzanie stylami (zaleca się stosowanie CSS). Jednak w wyjątkowych sytuacjach można przypisać styl wprost do linka:
<a href="https://example.com" style="text-decoration:none; color:#000;">Czarny link bez podkreślenia</a>
Usuwanie podkreślenia z konkretnego linka przez JavaScript
W razie konieczności dynamicznej zmiany stylów (np. z poziomu JavaScript):
Przykład JavaScript –
const link = document.getElementById('myLink');
link.style.textDecoration = 'none';
link.style.color = 'red'; // Opcjonalnie zmiana koloru
HTML –
<a id="myLink" href="#">Dynamiczny link</a>
Dodawanie podkreślenia na hover przez JavaScript
link.addEventListener("mouseenter", function(){
link.style.textDecoration = "underline";
});
link.addEventListener("mouseout", function(){
link.style.textDecoration = "none";
});
Co warto wiedzieć?
- Właściwość
text-decorationmożna stosować nie tylko do podkreśleń, ale i innych efektów tekstowych, jednak w kontekście hiperłączy najczęściej dotyczy właśnie usuwania podkreślenia. - Dobrym zwyczajem jest czytelne wyróżnienie odnośników (np. przez kolor lub efekt po najechaniu myszką) jeśli rezygnujesz z podkreślenia – pomaga to zrozumieć użytkownikom, co jest klikalne.
- Możesz połączyć usuwanie podkreślenia z innymi technikami stylizacji, np. animacjami.
Stylizowanie linków w różnych stanach
Możesz także stylizować odnośniki w różnych stanach, wykorzystując pseudoklasy takie jak:
:link– link nieodwiedzony,:visited– link odwiedzony,:hover– po najechaniu myszką,:active– podczas kliknięcia.
Przykład CSS –
a:link, a:visited { text-decoration: none; color: #005ffc; }
a:hover, a:active { text-decoration: underline; color: #d1008f; }
Stosowanie powyższych technik zapewnia pełną elastyczność w zarządzaniu wyglądem hiperłączy na stronie internetowej, co pozwala na dostosowanie ich do indywidualnych potrzeb projektu graficznego oraz oczekiwań użytkowników.
