Underline

We can use three CSS properties for draw an underline: text-decoration, border-bottom and box-shadow.

Sometimes we need to design a controlled underline. There are two CSS ways to draw controlled underline : box-shadow and border-bottom.

Let us see, how to use box-shadow.

Property: box-shadow

Values: inset | offset-x | offset-y  | blur-radius | spread-radius | color

Details about box-shadow is here.

We can get a underline like shadow effect by this property -

 box-shadow: inset 0 0px 0 white, inset 0 -1px 0 black;

Here, a box shadow is drawn on above background layer but under content layer, which is consist of two shadows.

inset is the first value of both shadows. This keyword is used to display as the content was depressed inside the box.

Second value of both shadows are 0, which means underline is equal to content's width.

Third values of two shadows are 0px and -1px, by which height of this underline is drown. It also means that the underline is drown under the content.

Fourth values of both shadows are 0, which mean that the edges of the shadows are sharp.

Last couple of values - white and black indicate that black shadow is placed upon white shadow.

Now, we will see how can we take control on underline's style by using border-bottom property.

border-bottom:  border-bottom-width border-bottom-style border-bottom-color;
For example you can declare a rule border-bottom: 1px dotted #212121;
This CSS rule declare a 1px width, dotted styled and #212121 colored bottom border.

To design a uncontrolled underline, text-decoration property is used.
For example, text-decoration: underline; declare a underline, which is browser specific.

However, possibility of design is sky :)