How to Add a Dotted Underline Beneath HTML Text

Question

How do you underline html text so that the line beneath the text is dotted rather than the standard underline  Preferably  I would like to do this without using a separate CSS file  I m a novice at html

User · Answer

You can use border bottom with dotted option    border-bottom  1px dotted  807f80

User · Answer

Use the following CSS codes     text-decoration underline  text-decoration-style  dotted

User · Answer

Reformatted the answer by  epascarello    x000D   x000D  u dotted   x000D    border-bottom  1px dashed  999  x000D    text-decoration  none  x000D    x000D   lt  DOCTYPE html gt  x000D   lt u class  dotted  gt I like cheese lt  u gt  x000D   x000D   x000D

User · Answer

Without CSS  you basically are stuck with using an image tag  Basically make an image of the text and add the underline  That basically means your page is useless to a screen reader    With CSS  it is simple   HTML    lt u class  dotted  gt I like cheese lt  u gt    CSS   u dotted    border-bottom  1px dashed  999    text-decoration  none       Running Example  Example page   lt  DOCTYPE HTML gt   lt html gt   lt head gt       lt style gt          u dotted            border-bottom  1px dashed  999            text-decoration  none                  lt  style gt   lt  head gt   lt body gt       lt u class  dotted  gt I like cheese lt  u gt   lt  body gt   lt  html gt

User · Answer

It s impossible without CSS  In fact  the  lt u gt  tag is simply adding text-decoration underline to the text with the browser s built-in CSS   Here s what you can do    lt html gt   lt head gt   lt  -- Other head stuff here  like title or meta -- gt    lt style type  text css  gt  u           border-bottom  1px dotted  000      text-decoration  none     lt  style gt   lt  head gt   lt  -- Body  content here -- gt   lt  html gt

User · Answer

If the content has more than 1 line  adding a bottom border won t help  In that case you ll have to use   text-decoration  underline  text-decoration-style  dotted    If you want more breathing space in between the text and the line  simply use   text-underline-position  under

User · Answer

HTML5  element can give dotted underline so the beneath text will have dotted line rather than regular underline  And the title attribute creates a tool tip for the user when they hover their cursor over the element   NOTE  The dotted border underline is shown by default in Firefox and Opera  but IE8  Safari  and Chrome need a line of CSS    lt abbr title  Hyper Text Markup Language  gt HTML lt  abbr gt

User · Answer

It s not impossible without CSS  For example as a list item    lt li style  border-bottom  1px dashed  gt  lt  --content -- gt  lt  li gt

User · Answer

You can try this method    lt h2 style  text-decoration  underline  text-underline-position  under  text-decoration-style  dotted  gt Hello World  lt  h2 gt    Please note that without text-underline-position  under  you still will have a dotted underline but this property will give it more breathing space   This is assuming you want to embed everything inside an HTML file using inline styling and not to use a separate CSS file or  tag

[html] How to Add a Dotted Underline Beneath HTML Text

Examples related to html

Examples related to underline