CSS dashed paragraph

Question

Hello is it possible to control how many dashed lines would be under the word?

I have something like this:

<p>Duza</p>

p {
  border-bottom: 4px dashed #999;
  display: inline;
    font-size:20px;
}

And the effect that I want to have:

JSFIddle

Answer 1

You can not control the length of CSS dashes or the space between them. (See this question and this question)

Solutions could be:

• Use more than one word to allow room for the dashes
• Use dotted rather than dashed
• as the links above point out, you could possibly use a gradient or an image

jsFiddle Demo