CSS: Skip underline in part of link

Make a class that hides underlines, and child class that adds them.

.underline-some {
  text-decoration: none;
}

.underline-some:hover .text {
  text-decoration: underline;
}
<a href="#" class="underline-some">
  <span class="text">Boyz</span> 
  <span class="text">Men</span>
</a>

This example code above only underlines links on hover. For always-underlined links, remove :hover.


a, a:hover { text-decoration: underline; }
a img, a:hover img { text-decoration: none !important; }


<a href="#" style="text-decoration:none;">
     <span style="text-decoration:underline;">one</span>  
    two
    <img src="img.png" style="border:0px; text-decoration:none;"> three
</a>

I think it can only be possible using javascript as follows.

LOOK FOLLOWING EXAMPLE

<html>
<head></head>
  <style>
    a{
       text-decoration:none;
     }

    a:hover
     {
       text-decoration:none;
     }

    .sample
     {
        text-decoration:underline;
     }

    .sample_none
     {
        text-decoration:none;
     }
   </style>
   <script type="text/javascript">
      function show_underline(){
        document.getElementById('sample').className= 'sample';
      }

      function hide_underline(){
        document.getElementById('sample').className= 'sample_none';
      }
   </script>
    <a href="#" onmouseover="show_underline();" onmouseout="hide_underline();"> <span id="sample" class="sample_none">two</span>  
    <img src="img.png" style="border:0px;"> three
    </a>


</body>
</html>

P.S. I would like to know if it is possible with css and html only

Tags:

Html

Css

Image

Hyperlink

Underline

Recent Posts