HTML CSS examples for CSS Property:border-bottom
Create Underline Colour with Border-bottom
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> a, a:hover { position: relative; text-decoration: none;<!--from ww w. jav a2 s . c o m--> color: black; } a:after { content: ''; display: block; position: absolute; height: 0; top:90%; left: 0; right: 0; border-bottom: solid 1px red; } a.near:after { top:83%; } a.far:after { top:100%; } </style> </head> <body> <p> test test test test test <a href="#">underlined link</a> ! </p> <p> Here's one where the <a href="#" class="near">underline</a> is closer. </p> <p> abc abc abc abc abc abc <a href="#" class="far">underline</a> is further away. </p> </body> </html>