发表新帖
发表新帖

How to Add a Dotted Underline Beneath HTML Text

后端 未结
关注
9 1531
挽巷
挽巷 2020-12-23 19:54

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 C

相关标签:
9条回答
  • 迷失自我
    2020-12-23 20:33

    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;
    0 讨论(0)
  • 灰色年华
    2020-12-23 20:34

    You can use border bottom with dotted option. 

    border-bottom: 1px dotted #807f80;
    0 讨论(0)
  • 暗喜
    2020-12-23 20:44

    It's not impossible without CSS. For example as a list item:

    <li style="border-bottom: 1px dashed"><!--content --></li>
    0 讨论(0)
  • 甜味超标
    2020-12-23 20:46

    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:

    <abbr title="Hyper Text Markup Language">HTML</abbr>
    0 讨论(0)
  • 庸人自扰
    2020-12-23 20:49

    You can try this method:

    <h2 style="text-decoration: underline; text-underline-position: under; text-decoration-style: dotted">Hello World!</h2>

    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.

    0 讨论(0)
  • 眼角桃花
    2020-12-23 20:52

    Reformatted the answer by @epascarello:

    u.dotted {
  border-bottom: 1px dashed #999;
  text-decoration: none;
}
    <!DOCTYPE html>
<u class="dotted">I like cheese</u>

    0 讨论(0)
 看不清?
提交回复
热议问题