Problem is shown in the link given below
** when i try to hover or press on the navlinks it's not selecting but showing text cursor but by moving a few inches it shows why this is happening is something wrong with the padding or its the chrome ? **
(https://www.youtube.com/watch?v=Vbt5geHBPz4)
my html code
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- icons -->
<link rel="stylesheet" href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">
<!-- own css -->
<link rel="stylesheet" href="{% static '/css/home/style.css' %}">
<!-- google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Abyssinica SIL&family=Montserrat:wght@500&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<header>
<a href="#" >TakeAway</a>
<div id="menu-bar"></div>
<ul >
<li><a href="#"></a>Home</li>
<li><a href="#"></a>Home</li>
<li><a href="#"></a>Home</li>
<li><a href="#"></a>Home</li>
</ul>
</header>
</body>
mycss
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Abyssinica SIL', serif;
scroll-behavior: smooth;
list-style: none;
text-decoration: none;
}
:root{
--main-color:rgb(243, 176, 88);
--text-color:#fff;
--bg-color:#ff4b24;
--big-font:5rem;
--h2-font:2.25rem;
--p-font:0.9rem;
}
*::selection{
background:var(--main-color);
color: rgb(0, 0, 0);
}
body{
color: var(--text-color);
background: var(--bg-color);
}
header{
position: fixed;
top: 0;
right: 0;
width: 100%;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
padding: 30px 150px;
background: var(--bg-color);
}
.logo{
color: var(--main-color);
font-weight: 600;
font-size: 2.4rem;
}
.navbar{
display: flex;
}
.navbar a{
color: var(--text-color);
font-size: 1.1rem;
padding: 10px 20px;
font-weight: 500;
}
.navbar a:hover{
color: var(--main-color);
transition: 0.4s;
}
CodePudding user response：
You have a typo in your html, your link text should be inside the anchor <a> tag as follow:
<li><a href="#">Home</a></li>