line under text css

1h1 {
2  text-decoration: overline;
3}
4
5h2 {
6  text-decoration: line-through;
7}
8
9h3 {
10  text-decoration: underline;
11}
12
13h4 {
14  text-decoration: underline overline;
15}

1text-decoration: underline;

1text-decoration: line-through

1h3 {
2  text-decoration: underline;
3}

1/* Using 'text-decoration' property with 'underline' value. we can draw underline below the text using css */
2<style>
3p {
4  text-decoration: underline;
5}
6</style>
7<p>Hello all Welcome here !!!</p>

1
2/******************* How to style your text? ************************/
3
4tag_name {
5  
6  text-decoration-line: underline; /* or overline; line-through; ... */
7  /*OR: */
8  text-decoration: underline overline dotted red;  /* text-decoration-line (can be more than one); text-decoration-style; text-decoration-color; */
9  
10  
11  color: blue;                     /* Sets the color of the text */
12  
13  text-decoration-color: yellow;   /* Sets the color of the text decoration */
14  
15  text-decoration-style: solid;    /* Sets the style of the text decoration (like solid, wavy, dotted, dashed, double) */
16  
17  font-style: italic; /* Specifies the font style for a text, like, if you want it as normal, italic, oblique,... */
18  
19  font-size: 1.6em; /* Sets the size of the text */
20  
21  letter-spacing: 5px; /* Sets the space between letters */
22  
23  line-height: 20px /* Sets the space between lines */
24  
25  font-family: "Times New Roman", Times, serif;   /* specifies the font for an element. It can hold several font names as a "fallback" or stack system. 
26                                                     If the browser does not support the first font, it tries the next font */
27  
28  
29  text-shadow: 2px 2px 8px; /* horizontal_shadow; vertical_shadow; blur-radius; color|none|initial|inherit; */
30  /*OR */ 
31  text-shadow: 0 0 #FF0000;  /* The blur is optional */
32  /*OR: */
33  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;  /* Text-shadow with a red and blue neon glow */
34  
35  
36  text-indent: 40px; /* Indents the first line of text with different values (can be negative values) */
37  
38  text-align: center;  /* Specifies the horizontal alignment of text in an element,by choosing, for exemple, justify, right, left, ... */
39  
40  overflow: hidden; /* Specifies what should happen if content overflows an element's box, by choosing, for exemple, visible; auto; scroll; ... */
41  
42  white-space: nowrap;  /* Specifies how white-space inside an element is handled, by choosing, for exemple, pre; normal; nowrap;... */
43  
44  text-overflow: ellipsis; /* Specifies how overflowed content that is not displayed should be signaled to the user, for exemple, with 3 dots */
45  
46  word-break: break-all; /* Specifies how words should break when reaching the end of a line, by choosing, for exemple, keep-all; normal; break-word; ... */
47  
48  word-wrap: break-word;  /* Allows long words to be able to be broken and wrap onto the next line. */
49
50}
51