×

Decorative Underscore [8/16]

You have probably seen many times the beautiful dotted underline. It is often used for links or other dynamic elements. The implementation is the following:

  1. Remove the ordinary underscore using text-decoration.
  2. Then, set the desired text color using the color property.
  3. After that, add decorative underscore using border-bottom.

Also, you can hide this underscore on hover using the :hover pseudo-class.


Do it
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Decorative Underscore</title> </head> <body> <h1>Why Has Progressive Enhancement Emerged?</h1> <p><a class="dashed" href="#">As we have mentioned above</a>, if your Web interface follows the highest standards of Graceful Degradation, you&apos;ll get a result similar to <span class="dashed">Progressive Enhancement</span>. So whoever needed this kind of enhancement in the first place?</p> <p>The answer is simple: few people succeeded to meet the highest standards of <span class="dashed">Graceful Degradation</span>. It was a big frustration even for really responsible and committed developers. After all, everyone could have said, "I am so great I do Graceful Degradation", but the effort and time spent by different developers varied by orders of magnitude.</p> </body> </html>
CSS
h1 { font-size: 24px; } .dashed { } .dashed:hover { border-bottom: none; }
HTML Academy

To a CSS rule of the dashed class, add the following properties:

  1. text-decoration: none;
  2. color: #0088CC;
  3. border-bottom: 1px dashed #0088CC;.
Theory Check Next