Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

CSS Dotted Underline

I'm looking on how to add a dotted underline on a span. I've tried text-decoration (and text-decoration-style), but it looks like it's not supported yet or something?


  • You need to state which Story Format (both name and version) you are using when you ask a question, as answers can be different for each one.

    If you look at the MDN text-decoration-style documentation you will see that this property is still only a Candidate Recommendation.

    You can use a border-bottom to achieve what you want.

    1. The CSS to place in your Story Stylesheet area.
    .dotted {
    	border-bottom: 1px dotted #000;
    	text-decoration: none;

    2. The markup to use in your passage, because you did not state the story format I will use generic markup.
    <span class="dotted">Text underlined with a dotted border.</span>
  • Yeah. you're right. It is not supported. I did some research just now to try to see if I could get it to work for you lol

    Text-decoration: underline; does work by itself. It underlines things. But the text-decoration-line, -style, -color etc apparently are only supported by Firefox for the most part right now.
  • Ugh. I was hoping that there's a more elegant way of doing it other than the bottom border. Cheers, @greyelf .

    @Gryphbear Thanks for the effort. It looks like it's bottom border for me. Look at me, making a bottom border like Trump.
Sign In or Register to comment.