Как нарисовать пунктирную линию с помощью CSS?

Question

Как нарисовать пунктирную линию с помощью CSS?

Answer 1

Добавьте следующий атрибут к элементу, для которого требуется пунктирная линия.

style="border-bottom: 1px dotted #ff0000;"

Answer 2

Использование hr создало для меня две линии, одну сплошную и одну пунктирную.

Я обнаружил, что это работает довольно хорошо:

div {
border-top: 1px dotted #cccccc;
color: #ffffff;
background-color: #ffffff;
height: 1px;
width: 95%;
}

Плюс, поскольку вы можете сделать ширину в процентах, она всегда будет иметь некоторое пространство с обеих сторон (даже при изменении размера окна).

Answer 3

Попробуй пунктир ...

<hr style="border-top: 2px dashed black;color:transparent;"/>

Answer 4

Пунктирная линия после элемента:

http://jsfiddle.net/korigan/ubtkc17e/

HTML

<h2 class="dotted-line">Lorem ipsum</h2>

CSS

.dotted-line {
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.dotted-line:after {
  content: "..........................................................................................................";
  letter-spacing: 6px;
  font-size: 30px;
  color: #9cbfdb;
  display: inline-block;
  vertical-align: 3px;
  padding-left: 10px;
}