Question 188186 in Html Question posted in
Some basic documentation can be found here.

Html – Wavy Underline on h1 heading is not displayed

I created an html file with paragraphs and headings then I created a CSS file for decorating the html file
on using the text decoration property with h1 heading I faced error.

I used the text decoration property in my CSS file but chrome is displaying only the simple underline at the h1 heading even after using wavy, dashed ,dotted type of lines ..pls explain me the reason..

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found the answer to my own question in just few minutes this is called the power of problem solving mindset. So the issue was that the wavy, dotted ,dashed, double, etc. underlines were not displayed by the chrome browser or any other browser. The answer is that by putting underline after all the types like : text-decoration=wavy underline; or placing dotted, dashed, double, etc. before underline we can get our desired underline to get displayed.


  2. 0

    text-decoration is a short-hand property for

    • text-decoration-color
    • text-decoration-line
    • text-decoration-style
    • text-decoration-thickness

    You have to define text-decoration-line , it’s compulsory. Other properties are optional. You can either use the short-hand or use these separately but using short-hand with any of the individual properties will cause issue. The order of properties in text-decoration does not matter. Check the code-snippet below:

    h1{
text-decoration: underline wavy;
}
h2{
text-decoration:2px wavy underline red;
}
h3{
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: green;
}
    <div>
  <h1> This is a heading </h1>
  <h2> This is another heading </h2>
  <h3>This is  also a heading</h3>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search