Как сделать пунктирное подчёркивание текста?

Question

[DrunkMaster]

Погуглил, нашёл мануалы через border-bottom: 1px dotted; но в результате получилась вот такая штука https://jsfiddle.net/p7a1qkn0/

.ptxt{
    font-family: 'Verdana', 'Tahoma';
    border-bottom: 3px dotted red;
}

Как сделать так что бы подчёркивание распространялось только на сам текст, а не на всю ширину строки и была подчёркнута каждая строка текста а не одна внизу?

Answer 1

[Максим]

dashed : https://jsfiddle.net/p7a1qkn0/3/

Comments

[DrunkMaster]

Да но не совчем, я update вопроса сделал, там добавлено:

и была подчёркнута каждая строка текста а не одна внизу

[Максим]

DrunkMaster, https://codepen.io/MaximLensky/pen/EbWjdV так

[DrunkMaster]

Максим Ленский, да, благодарю

Answer 2

[Anton Bobylev]

https://css-tricks.com/styling-underlines-web/

Answer 3

[MrGaunt]

- блочный элемент, поэтому его ширина 100% строки.

Замените на (inline-элемент) и будет как вы хотите.

Comments

[DrunkMaster]

Да но не совчем, я update вопроса сделал, там добавлено:

и была подчёркнута каждая строка текста а не одна внизу

Answer 4

[roswell]

.ptxt {
    /* ... */
    display: inline;
}

Comments

[DrunkMaster]

Да но не совчем, я update вопроса сделал, там добавлено:

и была подчёркнута каждая строка текста а не одна внизу

[roswell]

DrunkMaster, https://jsfiddle.net/nq6w375f/