Underlining links

Question

I am writing a site to order. But I ran into the problem for the first time - I can not remove the underscores from the bottom of the link. Already tried through

a: hover {text-decoration: none}

as well as on another. From below I will provide HTML code as well as CSS code I ask to help to correct such unexpected error

body{background: #efefef 
 url("images/geometry2.png");
 margin: 0; padding: 0;
 font: 16px/24px Arial, Tahoma, Sans-serif;
}

div.mid{
 width: 1000px; margin: 0 auto; 
}
a:hover {
 text-decoration: none;
}
div.header{
 background: #101417;
}
/*Шапка  сайта*/
div.topmenu{float: right;height: 70px; line-height: 70px;}
div.topmenu a{margin: 0 0 0 10px; color: #0000FF;}
div.topmenu a:hover{color: #fff}
div.afisha {padding: 20px 50px 0 50px; background: #f2f2f2 url("images/headline.png") top repeat-x;}
div.afisha img {float: left; }
div.afisha h3 {font-size: 24px; font-weight: normal; text-align: center; color: #830000;}
div.afisha p{text-align: center;}
div.afisha a{font-size: 20px; color: #fff; font-weight: bold; background: #b23600; border: 1px solid #862900;}
div.clear{clear: both;}

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Мой сайт</title>
 <link rel="shortcut icon" type="image/x-icon" href="images/logomin.png">
 <link rel="stylesheet" href="style.css" media="all">
</head>
<body>
 <div class="header">
  <div class="mid" >
   <header>
    <div class="topmenu" style='float:right;height: 70px; line-height: 70px'
    </div>
    <aside>
     <a href="#">Главная</a>
           <a href="#">Тренинг</a>
       <a href="#">Шаблоны</a>
        <a href="#">Контакты</a>
         </aside>
         </div>
    <img src="images/logo.png" alt="Логотип сайта" title="Логотип сайта">
    <div class="afisha"</div>
     <img src="images/v5.jpg" alt="Обложка тренинга" title="Обложка тренинга">
    <h3>Стань профессиональным верстальщиком<br>всего за 2 месяца<br> и зарабатывай по 30 000 рублей!</h3>
    <p><a href="#">Смотрите здесь</a><p>
    <div class="clear"></div>
   </header>
  </div>
 </div>
 <div class="menu">
  <div class="mid" >Привет мир</div>
 </div>
 <div class="conten">
  <div class="mid" ></div>
 </div>
 <div class="footer">
  <div class="mid" ></div>
 </div>
</body>
</html>

If you run the snippet you posted, the underline does disappear when hovering over the link. — Jeto, Aug 26 '18 at 17:46
I don't know if you have any other CSS but have you tried to use `text-decoration: none !important;` — SuperDJ, Aug 26 '18 at 17:47
Possible duplicate of [Remove stubborn underline from link](https://stackoverflow.com/questions/2789703/remove-stubborn-underline-from-link) — Luke B, Aug 26 '18 at 20:04

score 0 · Answer 1 · answered Aug 26 '18 at 17:53

0

try with

div.mid{
width: 1000px; margin: 0 auto; 
}
a {
   text-decoration: none;
}
a:hover {
text-decoration: none;
}

also clear caches before checking results..

answered Aug 26 '18 at 17:53

Dr Manish Lataa-Manohar Joshi

2,380
5
17
38

score 0 · Answer 2 · answered Aug 26 '18 at 19:36

0

With :hover you can set CSS properties when the link in hovered(i.e. mouse is over the link).

It seems you want to remove the default underline property of the link. To do so you need to apply CSS directly to the a tag:

a{text-decoration: none}

answered Aug 26 '18 at 19:36

Ketan Yekale

2,108
3
26
33

Underlining links

2 Answers2