php - 带有 CSS 的虚线文本？

Question

任何知道如何制作点 0 的 CSS 大师？我有一个想法，如这里描述的那样，结合白色正斜杠和反斜杠进行白色删除，但也许有更好的方法。

Answer 1

使用带点零的字体。您可以使用@font-face包含一个字体，您可以保证将有一个虚线零。

Answer 2

Option 1. Position a bullet over it:

<div>HELL<span class="dottedO">O<span>&bull;</span></span> WORLD</div>

CSS:

.dottedO {
  display: inline-block;
  overflow: auto;
  position: relative;
}

.dottedO span {
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  text-align: center;
}

Option 2: Using the unicode Bilabial click character (ʘ):

<div>&#664;</div>

JSBIN: http://jsbin.com/ewufod/1

Note the above two solutions may cause issues with screen readers, search engines, etc as you're adding a non-standard character to the mix.

Option 3: Background image

Wrap the 'O' in a span, set it to display: inline-block and give the span a background image of a dot. Drawback: that won't print.

Option 4: Use a font that already has this style (embed a web font).

Answer 3