Computer >> 컴퓨터 >  >> 프로그램 작성 >> CSS

CSS를 사용하여 활성 링크 주변의 점선 제거

<시간/>

활성/초점 링크의 CSS 개요 속성을 없음으로 선언하여 활성 또는 초점이 맞춰져 있을 때 주변에 점선 윤곽을 표시하는 하이퍼링크의 기본 동작을 제거할 수 있습니다.

해결책

a, a:active, a:focus {
   outline: none;
}

예시

예를 들어 활성 링크 주변의 점선을 제거하는 방법을 살펴보겠습니다. -

<!DOCTYPE html>
<html>
<head>
<title>Remove dotted line around links using css</title>
</head>
<style>
div {
   color: #000;
   padding:20px;
   background-image: linear-gradient(135deg, #dc3545 0%, #9599E2 100%);
   text-align: center;
}
a, a:active, a:focus {
   outline: none;
}
</style>
<body>
<div>
<h1>HTML Links Demo</h1>
<a href="https://google.com" target="_blank">Go To Google</a>
</div>
</body>
</html>

출력

다음은 위의 코드에 대한 출력입니다 -

솔루션을 적용하기 전에

CSS를 사용하여 활성 링크 주변의 점선 제거

솔루션 적용 후

CSS를 사용하여 활성 링크 주변의 점선 제거