blocks|key|449238|text|您现在可以包含web字体，甚至可以缩小文件大小，只需使用所需的符号。https://github.com/fontello/fontello+http://fontello.com/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|449239|li:before+{
++content:'[add+icon+symbol+here]';
++font-family:+[my+cool+web+icon+font+here];
++display:inline-block;
++vertical-align:+top;
++line-height:+1em;
++width:+1em;
++height:1em;
++margin-right:+0.3em;
++text-align:+center;
++color:+#999;
}|code-block|syntax|javascript|449240|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/fontello/fontello|1|http://fontello.com/^0|Y|10|0|1Z|K|1|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]|$A|W|B|X|1|Y]]|C|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]|Q|$5|L|M|N|C|$O|R]]]]

<p>You can now include web fonts and even shrink down the file size with just the glyphs you need.
<a href="https://github.com/fontello/fontello">https://github.com/fontello/fontello</a>
<a href="http://fontello.com/">http://fontello.com/</a></p>

<pre><code>li:before {
  content:'[add icon symbol here]';
  font-family: [my cool web icon font here];
  display:inline-block;
  vertical-align: top;
  line-height: 1em;
  width: 1em;
  height:1em;
  margin-right: 0.3em;
  text-align: center;
  color: #999;
}
</code></pre>


blocks|key|1173101|text|你可以画两个长方形，并把它们放在一起。然后旋转45度。修改宽度/高度/顶部/左参数以适应任何变化。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1173102|演示1|offset|length|1173103|演示2(带圆圈)|1173104|1173105|<span+class="checkmark">
++++<div+class="checkmark_stem"></div>
++++<div+class="checkmark_kick"></div>
</span>|code-block|syntax|javascript|1173106|CSS|style|BOLD|1173107|.checkmark+{
++++display:inline-block;
++++width:+22px;
++++height:22px;
++++-ms-transform:+rotate(45deg);+/*+IE+9+*/
++++-webkit-transform:+rotate(45deg);+/*+Chrome,+Safari,+Opera+*/
++++transform:+rotate(45deg);
}

.checkmark_stem+{
++++position:+absolute;
++++width:3px;
++++height:9px;
++++background-color:#ccc;
++++left:11px;
++++top:6px;
}

.checkmark_kick+{
++++position:+absolute;
++++width:3px;
++++height:3px;
++++background-color:#ccc;
++++left:8px;
++++top:12px;
}|1173108|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/awayF/490/|1|http://jsfiddle.net/awayF/491/^0|0|0|3|0|0|0|8|1|0|0|0|0|3|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|14|8|@]|9|@$D|15|E|16|1|17]]|A|$]]|$1|F|3|G|5|6|7|18|8|@]|9|@$D|19|E|1A|1|1B]]|A|$]]|$1|H|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|1D|8|@]|9|@]|A|$L|M]]|$1|N|3|O|5|6|7|1E|8|@$D|1F|E|1G|P|Q]]|9|@]|A|$]]|$1|R|3|S|5|K|7|1H|8|@]|9|@]|A|$L|M]]|$1|T|3|-4|5|6|7|1I|8|@]|9|@]|A|$]]]|U|$V|$5|W|X|Y|A|$Z|10]]|11|$5|W|X|Y|A|$Z|12]]]]

<p>You can draw two rectangles and place them next to each other. And then rotate by 45 degrees. Modify the width/height/top/left parameters for any variation.</p>

<p><a href="http://jsfiddle.net/awayF/490/">DEMO 1</a> </p>

<p><a href="http://jsfiddle.net/awayF/491/">DEMO 2 (With circle)</a></p>

<p><strong>HTML</strong></p>

<pre><code>&lt;span class="checkmark"&gt;
    &lt;div class="checkmark_stem"&gt;&lt;/div&gt;
    &lt;div class="checkmark_kick"&gt;&lt;/div&gt;
&lt;/span&gt;
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>.checkmark {
    display:inline-block;
    width: 22px;
    height:22px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}

.checkmark_stem {
    position: absolute;
    width:3px;
    height:9px;
    background-color:#ccc;
    left:11px;
    top:6px;
}

.checkmark_kick {
    position: absolute;
    width:3px;
    height:3px;
    background-color:#ccc;
    left:8px;
    top:12px;
}
</code></pre>


blocks|key|1173116|text|这里是另一个CSS解决方案。它的代码行较少。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1173117|ul+li:before
{
++++content:+'\2713';
++++display:+inline-block;
++++color:+red;
++++padding:+0+6px+0+0;
}

ul+li
{
++++list-style-type:+none;
++++font-size:+1em;
}

<ul>
++++<li>test1</li>
++++<li>test</li>
</ul>|code-block|syntax|javascript|1173118|以下是演示链接http://jsbin.com/keliguqi/1/|offset|length|1173119|entityMap|0|LINK|mutability|MUTABLE|url|http://jsbin.com/keliguqi/1/^0|0|0|7|S|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Here is another CSS solution. its take less line of code.</p>
<pre><code>ul li:before
{
    content: '\2713';
    display: inline-block;
    color: red;
    padding: 0 6px 0 0;
}

ul li
{
    list-style-type: none;
    font-size: 1em;
}

&lt;ul&gt;
    &lt;li&gt;test1&lt;/li&gt;
    &lt;li&gt;test&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
<p>Here is the Demo link <a href="http://jsbin.com/keliguqi/1/" rel="noreferrer">http://jsbin.com/keliguqi/1/</a></p>


blocks|key|449322|text|用字母L做一些变换|type|unstyled|depth|inlineStyleRanges|entityRanges|data|449323|​|449324|.checkmark+{
++font-family:+arial;
++-ms-transform:+scaleX(-1)+rotate(-35deg);+/*+IE+9+*/
++-webkit-transform:+scaleX(-1)+rotate(-35deg);+/*+Chrome,+Safari,+Opera+*/
++transform:+scaleX(-1)+rotate(-35deg);
}|code-block|syntax|javascript|449325|<div+class="checkmark">L</div>|449326|449327|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Do some transforms with the letter L</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.checkmark {
  font-family: arial;
  -ms-transform: scaleX(-1) rotate(-35deg); /* IE 9 */
  -webkit-transform: scaleX(-1) rotate(-35deg); /* Chrome, Safari, Opera */
  transform: scaleX(-1) rotate(-35deg);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="checkmark"&gt;L&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1450736|text|只有css，很简单我发现它：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1450737|​|1450738|.checkmark+{
++++++display:+inline-block;
++++++transform:+rotate(45deg);
++++++height:+25px;
++++++width:+12px;
++++++margin-left:+60%25;+
++++++border-bottom:+7px+solid+#78b13f;
++++++border-right:+7px+solid+#78b13f;
++++}|code-block|syntax|javascript|1450739|<div+class="checkmark"></div>|1450740|1450741|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>only css, quite simple I find it: </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.checkmark {
      display: inline-block;
      transform: rotate(45deg);
      height: 25px;
      width: 12px;
      margin-left: 60%; 
      border-bottom: 7px solid #78b13f;
      border-right: 7px solid #78b13f;
    }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="checkmark"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1450504|text|当您只有一个可用的前/:之后的psuedo元素时，一个额外的解决方案在这里描述：*使用边框后的复选框|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1450505|它基本上使用border-bottom和border-right属性来创建复选框，然后使用transform旋转镜像L。|style|CODE|1450506|示例|BOLD|1450507|​|1450508|li+{
++position:+relative;+/*+necessary+for+positioning+the+:after+*/
}

li.done+{
++list-style:+none;+/*+remove+normal+bullet+for+done+items+*/
}

li.done:after+{
++content:+"";
++background-color:+transparent;
++
++/*+position+the+checkbox+*/
++position:+absolute;
++left:+-16px;
++top:+0px;

++/*+setting+the+checkbox+*/
++++/*+short+arm+*/
++width:+5px;
++border-bottom:+3px+solid+#4D7C2A;
++++/*+long+arm+*/
++height:+11px;
++border-right:+3px+solid+#4D7C2A;
++
++/*+rotate+the+mirrored+L+to+make+it+a+checkbox+*/
++transform:+rotate(45deg);
++++-o-transform:+rotate(45deg);
++++-ms-transform:+rotate(45deg);
++++-webkit-transform:+rotate(45deg);
}|code-block|syntax|javascript|1450509|To+do:
<ul>
++<li+class="done">Great+stuff</li>
++<li+class="done">Easy+stuff</li>
++<li>Difficult+stuff</li>
</ul>|1450510|1450511|entityMap|0|LINK|mutability|MUTABLE|url|http://webitect.net/design/webdesign/creating-fancy-bullet-points-with-pure-css3/^0|14|A|0|0|6|D|K|C|19|9|0|0|2|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|D|3|E|5|6|7|16|8|@$A|17|B|18|F|G]|$A|19|B|1A|F|G]|$A|1B|B|1C|F|G]]|9|@]|C|$]]|$1|H|3|I|5|6|7|1D|8|@$A|1E|B|1F|F|J]]|9|@]|C|$]]|$1|K|3|L|5|6|7|1G|8|@]|9|@]|C|$]]|$1|M|3|N|5|O|7|1H|8|@]|9|@]|C|$P|Q]]|$1|R|3|S|5|O|7|1I|8|@]|9|@]|C|$P|Q]]|$1|T|3|L|5|6|7|1J|8|@]|9|@]|C|$]]|$1|U|3|-4|5|6|7|1K|8|@]|9|@]|C|$]]]|V|$W|$5|X|Y|Z|C|$10|11]]]]

<p>An additional solution, for when you only have one of the :before / :after psuedo-elements available, is described here: <a href="http://webitect.net/design/webdesign/creating-fancy-bullet-points-with-pure-css3/">:after-Checkbox using borders </a></p>

<p>It basically uses the <code>border-bottom</code> and <code>border-right</code> properties to create the checkbox, and then rotates the mirrored L using <code>transform</code></p>

<p><strong>Example</strong></p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>li {
  position: relative; /* necessary for positioning the :after */
}

li.done {
  list-style: none; /* remove normal bullet for done items */
}

li.done:after {
  content: "";
  background-color: transparent;
  
  /* position the checkbox */
  position: absolute;
  left: -16px;
  top: 0px;

  /* setting the checkbox */
    /* short arm */
  width: 5px;
  border-bottom: 3px solid #4D7C2A;
    /* long arm */
  height: 11px;
  border-right: 3px solid #4D7C2A;
  
  /* rotate the mirrored L to make it a checkbox */
  transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>To do:
&lt;ul&gt;
  &lt;li class="done"&gt;Great stuff&lt;/li&gt;
  &lt;li class="done"&gt;Easy stuff&lt;/li&gt;
  &lt;li&gt;Difficult stuff&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
</div>
</p>


blocks|key|449496|text|我在过去使用过类似于BM2ilabs的答案来在复选框中设置滴答的样式。这种技术只使用一个伪元素，因此它保留了语义HTML，并且没有理由增加HTML元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|449497|简单，语义，没有任何依赖项或附加的HTML.|offset|length|style|BOLD|449498|​|449499|label+{
++cursor:+pointer;
}

input[type="checkbox"]+{
++position:+relative;
++top:+2px;
++box-sizing:+content-box;
++width:+14px;
++height:+14px;
++margin:+0+5px+0+0;
++cursor:+pointer;
++-webkit-appearance:+none;
++border-radius:+2px;
++background-color:+#fff;
++border:+1px+solid+#b7b7b7;
}

input[type="checkbox"]:before+{
++content:+'';
++display:+block;
++transition:+transform+200ms;
}

input[type="checkbox"]:checked:before+{
++width:+4px;
++height:+9px;
++margin:+0px+4px;
++border-bottom:+2px+solid+#115c80;
++border-right:+2px+solid+#115c80;
++transform:+rotate(45deg);
}|code-block|syntax|javascript|449500|<label>
++<input+type="checkbox"+name="check-1"+value="Label">Label
</label>|449501|449502|entityMap^0|0|0|M|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@$D|V|E|W|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|Y|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|L|7|Z|8|@]|9|@]|A|$M|N]]|$1|Q|3|I|5|6|7|10|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|S|$]]

<p>I've used something similar to BM2ilabs's answer in the past to style the tick in checkboxes. This technique uses only a single pseudo element so it preserves the semantic HTML and there is no reason for additional HTML elements.</p>
<p><strong>Simple, semantic, without any dependencies or additional HTML.</strong></p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>label {
  cursor: pointer;
}

input[type="checkbox"] {
  position: relative;
  top: 2px;
  box-sizing: content-box;
  width: 14px;
  height: 14px;
  margin: 0 5px 0 0;
  cursor: pointer;
  -webkit-appearance: none;
  border-radius: 2px;
  background-color: #fff;
  border: 1px solid #b7b7b7;
}

input[type="checkbox"]:before {
  content: '';
  display: block;
  transition: transform 200ms;
}

input[type="checkbox"]:checked:before {
  width: 4px;
  height: 9px;
  margin: 0px 4px;
  border-bottom: 2px solid #115c80;
  border-right: 2px solid #115c80;
  transform: rotate(45deg);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;label&gt;
  &lt;input type="checkbox" name="check-1" value="Label"&gt;Label
&lt;/label&gt;</code></pre>
</div>
</div>
</p>


blocks|key|449438|text|试试这个//+html示例|type|unstyled|depth|inlineStyleRanges|entityRanges|data|449439|<span>&#10003;</span>|code-block|syntax|javascript|449440|//+css示例|449441|span+{
++content:+"\2713";
}|449442|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Try this 
// html example</p>

<pre><code>&lt;span&gt;&amp;#10003;&lt;/span&gt;
</code></pre>

<p>// css example</p>

<pre><code>span {
  content: "\2713";
}
</code></pre>


blocks|key|449399|text|我喜欢这种方式，因为您不需要创建两个组件，只需要创建一个组件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|449400|.checkmark:after+{
++++opacity:+1;
++++height:+4em;
++++width:+2em;
++++-webkit-transform-origin:+left+top;
++++transform-origin:+left+top;
++++border-right:+2px+solid+#5cb85c;
++++border-top:+2px+solid+#5cb85c;
++++content:+'';
++++left:+2em;
++++top:+4em;
++++position:+absolute;
}|code-block|syntax|javascript|449401|斯科特·加洛韦·潘的动画|offset|length|449402|entityMap|0|LINK|mutability|MUTABLE|url|https://codepen.io/scottloway/pen/zqoLyQ^0|0|0|0|C|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>i like this way because you don't need to create two components just one.</p>

<pre><code>.checkmark:after {
    opacity: 1;
    height: 4em;
    width: 2em;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    border-right: 2px solid #5cb85c;
    border-top: 2px solid #5cb85c;
    content: '';
    left: 2em;
    top: 4em;
    position: absolute;
}
</code></pre>

<p><a href="https://codepen.io/scottloway/pen/zqoLyQ" rel="noreferrer">Animation from Scott Galloway Pen</a></p>


blocks|key|449220|text|我建议用滴答符号，不要画。或者使用免费的网页字体，例如:+fontellodotcom，您可以用一个web字体字形代替刻度符号。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|449221|列出|offset|length|style|BOLD|449222|ul+{padding:+0;}
li+{list-style:+none}
li:before+{
++display:inline-block;
++vertical-align:+top;
++line-height:+1em;
++width:+1em;
++height:1em;
++margin-right:+0.3em;
++text-align:+center;
++content:+'✔';
++color:+#999;
}|code-block|syntax|javascript|449223|见此处：http://jsfiddle.net/hpmW7/3/|449224|复选框|449225|你甚至有带有勾号符号符号和CSS+3动画的网页字体。对于IE8，您需要应用一个多边形填充，因为它不理解:选中。|449226|input[type="checkbox"]+{
++clip:+rect(1px,+1px,+1px,+1px);
++left:+-9999px;
++position:+absolute+!important;
}
label:before,
input[type="checkbox"]:checked+%2B+label:before+{
++content:'';
++display:inline-block;
++vertical-align:+top;
++line-height:+1em;
++border:+1px+solid+#999;
++border-radius:+0.3em;
++width:+1em;
++height:1em;
++margin-right:+0.3em;
++text-align:+center;
}
input[type="checkbox"]:checked+%2B+label:before+{
++content:+'✔';
++color:+green;
}|449227|见JS小提琴：http://jsfiddle.net/VzvFE/37|449228|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/hpmW7/3/|1|http://jsfiddle.net/VzvFE/37^0|0|0|2|0|0|4|S|0|0|0|3|0|0|0|7|S|1|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@$D|18|E|19|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|1A|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|1B|8|@]|9|@$D|1C|E|1D|1|1E]]|A|$]]|$1|O|3|P|5|6|7|1F|8|@$D|1G|E|1H|F|G]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1I|8|@]|9|@]|A|$]]|$1|S|3|T|5|J|7|1J|8|@]|9|@]|A|$K|L]]|$1|U|3|V|5|6|7|1K|8|@]|9|@$D|1L|E|1M|1|1N]]|A|$]]|$1|W|3|-4|5|6|7|1O|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13]]|14|$5|Z|10|11|A|$12|15]]]]

<p>I suggest to use a tick symbol not draw it. Or use webfonts which are free for example: fontello[dot]com You can than replace the tick symbol with a web font glyph.</p>

<p><strong>Lists</strong></p>

<pre><code>ul {padding: 0;}
li {list-style: none}
li:before {
  display:inline-block;
  vertical-align: top;
  line-height: 1em;
  width: 1em;
  height:1em;
  margin-right: 0.3em;
  text-align: center;
  content: '✔';
  color: #999;
}
</code></pre>

<p>See here: <a href="http://jsfiddle.net/hpmW7/3/" rel="nofollow">http://jsfiddle.net/hpmW7/3/</a></p>

<p><strong>Checkboxes</strong></p>

<p><em>You even have web fonts with tick symbol glyphs and CSS 3 animations. For IE8 you would need to apply a polyfill since it does not understand :checked.</em></p>

<pre><code>input[type="checkbox"] {
  clip: rect(1px, 1px, 1px, 1px);
  left: -9999px;
  position: absolute !important;
}
label:before,
input[type="checkbox"]:checked + label:before {
  content:'';
  display:inline-block;
  vertical-align: top;
  line-height: 1em;
  border: 1px solid #999;
  border-radius: 0.3em;
  width: 1em;
  height:1em;
  margin-right: 0.3em;
  text-align: center;
}
input[type="checkbox"]:checked + label:before {
  content: '✔';
  color: green;
}
</code></pre>

<p>See the JS fiddle: <a href="http://jsfiddle.net/VzvFE/37" rel="nofollow">http://jsfiddle.net/VzvFE/37</a></p>


blocks|key|449246|text|li:before+{
++++content:+'';
++++height:+5px;
++++background-color:+green;
++++position:+relative;
++++display:+block;
++++top:+50%25;
++++left:+50%25;
++++width:+9px;
++++margin-left:+-15px;
++++-ms-transform:+rotate(45deg);
++++-webkit-transform:+rotate(45deg);
++++transform:+rotate(45deg);
}
li:after+{
++++content:+'';
++++height:+5px;
++++background-color:+green;
++++position:+relative;
++++display:+block;
++++top:+50%25;
++++left:+50%25;
++++width:+20px;
++++margin-left:+-11px;
++++margin-top:+-6px;
++++-ms-transform:+rotate(-45deg);
++++-webkit-transform:+rotate(-45deg);
++++transform:+rotate(-45deg);
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|449247|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>li:before {
    content: '';
    height: 5px;
    background-color: green;
    position: relative;
    display: block;
    top: 50%;
    left: 50%;
    width: 9px;
    margin-left: -15px;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
li:after {
    content: '';
    height: 5px;
    background-color: green;
    position: relative;
    display: block;
    top: 50%;
    left: 50%;
    width: 20px;
    margin-left: -11px;
    margin-top: -6px;
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
</code></pre>


blocks|key|449609|text|在改变了亨利的答案之后，我得到了一个圆圈，我来到这里寻找它，所以在这里添加我的代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|449610|​|449611|.snackbar_circle+{
++background-color:+#f0f0f0;
++border-radius:+13px;
++padding:+0+5px;
}

.checkmark+{
++font-family:+arial;
++font-weight:+bold;
++-ms-transform:+scaleX(-1)+rotate(-35deg);
++-webkit-transform:+scaleX(-1)+rotate(-35deg);
++transform:+scaleX(-1)+rotate(-35deg);
++color:+#63BA3D;
++display:+inline-block;
}|code-block|syntax|javascript|449612|<span+class="snackbar_circle">
+++<span+class="checkmark">L</span>
</span>|449613|449614|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>After some changing to above Henry's answer, I got a tick with in a circle, I came here looking for that, so adding my code here.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.snackbar_circle {
  background-color: #f0f0f0;
  border-radius: 13px;
  padding: 0 5px;
}

.checkmark {
  font-family: arial;
  font-weight: bold;
  -ms-transform: scaleX(-1) rotate(-35deg);
  -webkit-transform: scaleX(-1) rotate(-35deg);
  transform: scaleX(-1) rotate(-35deg);
  color: #63BA3D;
  display: inline-block;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span class="snackbar_circle"&gt;
   &lt;span class="checkmark"&gt;L&lt;/span&gt;
&lt;/span&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1173332|text|你可能想试试fontawesome.io|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1173333|它收集了大量的图标。对你来说，<i+class="fa+fa-check"+aria-hidden="true"></i>应该能工作。这里也有许多检查图标。希望能帮上忙。|style|CODE|1173334|entityMap|0|LINK|mutability|MUTABLE|url|http://fontawesome.io/^0|6|E|0|0|F|1A|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@$A|U|B|V|F|G]]|9|@]|C|$]]|$1|H|3|-4|5|6|7|W|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]]]

<p>You might want to try <a href="http://fontawesome.io" rel="nofollow noreferrer">fontawesome.io</a> </p>

<p>It has great collection of icons. For you <code>&lt;i class="fa fa-check" aria-hidden="true"&gt;&lt;/i&gt;</code> should work. There are many check icons in this too. Hope it helps.</p>


blocks|key|1173532|text|另外，使用超赞字体，您可以使用以下标记。简约美丽|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1173533|更改CSS中的大小、颜色和其他功能的可能性|1173534|​|1173535|见结果这里|1173536|entityMap|0|LINK|mutability|MUTABLE|url|http://fontawesome.com/|1|https://www.w3schools.com/icons/tryit.asp?filename=tryicons_fa-check-circle^0|5|4|0|0|0|0|3|2|1|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|D|3|E|5|6|7|X|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|Y|8|@]|9|@]|C|$]]|$1|H|3|I|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|J|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|K|$L|$5|M|N|O|C|$P|Q]]|R|$5|M|N|O|C|$P|S]]]]

<p>Also, using the <a href="http://fontawesome.com/" rel="nofollow noreferrer">awesome font</a>, you can use the following tag.
Simple and beautiful</p>
<p>With the possibility of changing the size and color and other features in CSS</p>
<p></p>
<p>See result <a href="https://www.w3schools.com/icons/tryit.asp?filename=tryicons_fa-check-circle" rel="nofollow noreferrer">here</a></p>


blocks|key|1450823|text|这是我制作“选中”按钮的变体。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1450824|HTML|1450825|<button+class="unchecked"+type="submit"+onclick="clickMe(this);+return+false;"+value="something"></button>|code-block|syntax|javascript|1450826|JavaScript|1450827|function+clickMe(data)+{
++data.classList.add("checked");
}|1450828|CSS|1450829|.unchecked::before+{+content:+"C";+}
.unchecked+{+border-radius:+50%25;+outline:+none;+}
.checked::before+{+content:+"L";+}
.checked+{+background-color:+green;+transform:+rotate(45deg)+scaleX(-1);+}|1450830|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>This is my variant for making 'checked' buttons</p>
<p>HTML</p>
<pre><code>&lt;button class=&quot;unchecked&quot; type=&quot;submit&quot; onclick=&quot;clickMe(this); return false;&quot; value=&quot;something&quot;&gt;&lt;/button&gt;
</code></pre>
<p>JavaScript</p>
<pre><code>function clickMe(data) {
  data.classList.add(&quot;checked&quot;);
}
</code></pre>
<p>CSS</p>
<pre><code>.unchecked::before { content: &quot;C&quot;; }
.unchecked { border-radius: 50%; outline: none; }
.checked::before { content: &quot;L&quot;; }
.checked { background-color: green; transform: rotate(45deg) scaleX(-1); }
</code></pre>


blocks|key|1173622|text|我们可以使用CSS伪元素来生成复选标记/勾号。假设我们的HTML中有一个span标记，我们希望在span之前放置一个复选标记。我们可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1173623|<span+class="check_text">Some+Text</span>|code-block|syntax|javascript|1173624|现在，我们可以添加这样的CSS：|1173625|span.check_text:before+{
++++position:+absolute;
++++height:+15px;
++++width:+5px;
++++border-bottom:+3px+solid+red;
++++border-right:+3px+solid+red;
++++content:+"";
++++transform:+rotate(45deg);
++++left:+-25px;
++++top:+2px;
}|1173626|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>We can use CSS pseudo-element to make the checkmark/tick sign. Suppose, we have a span tag in our HTML and we want to place out checkmark before the span. We can simply do this:</p>
<pre><code>&lt;span class=&quot;check_text&quot;&gt;Some Text&lt;/span&gt;
</code></pre>
<p>Now, we can add the CSS like this:</p>
<pre><code>span.check_text:before {
    position: absolute;
    height: 15px;
    width: 5px;
    border-bottom: 3px solid red;
    border-right: 3px solid red;
    content: &quot;&quot;;
    transform: rotate(45deg);
    left: -25px;
    top: 2px;
}
</code></pre>


blocks|key|449690|text|如果你想要一个蜱，你可能也想要一个带背景色的十字。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|449691|​|449692|.icon+{
++display:+inline-block;
++width:+22px;+height:+22px;
++border-radius:+50%25;
++transform:+rotate(45deg);
}
.icon::before,+.icon::after+{+position:+absolute;+content:+'';+background-color:+#fff;+}
.icon.icon-success++++++++++{+background:+green;+}
.icon.icon-success:before+++{+width:++3px;+height:++9px;+top:++6px;+left:+11px;+}
.icon.icon-success:after++++{+width:++3px;+height:++3px;+top:+12px;+left:++8px;+}
.icon.icon-failure++++++++++{+background:+lightcoral;+}
.icon.icon-failure::before++{+width:++3px;+height:+12px;+top:++5px;+left:+10px;+}
.icon.icon-failure::after+++{+width:+12px;+height:++3px;+top:+10px;+left:++5px;+}|code-block|syntax|javascript|449693|<i+class="icon+icon-success"></i>
<i+class="icon+icon-failure"></i>|449694|449695|entityMap^0|7|1|M|2|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|X|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|Q|$]]

<p>If you want a <strong>tick</strong>, you probably also want a <strong>cross</strong>, with background colours.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.icon {
  display: inline-block;
  width: 22px; height: 22px;
  border-radius: 50%;
  transform: rotate(45deg);
}
.icon::before, .icon::after { position: absolute; content: ''; background-color: #fff; }
.icon.icon-success          { background: green; }
.icon.icon-success:before   { width:  3px; height:  9px; top:  6px; left: 11px; }
.icon.icon-success:after    { width:  3px; height:  3px; top: 12px; left:  8px; }
.icon.icon-failure          { background: lightcoral; }
.icon.icon-failure::before  { width:  3px; height: 12px; top:  5px; left: 10px; }
.icon.icon-failure::after   { width: 12px; height:  3px; top: 10px; left:  5px; }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;i class="icon icon-success"&gt;&lt;/i&gt;
&lt;i class="icon icon-failure"&gt;&lt;/i&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1450697|text|这是标记标记的简单css。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1450698|在{不透明:1之后；内容：‘\2713’；右:20+ul；位置:绝对；字体大小:20+ul；字体重:粗体；}|1450699|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>This is simple css for Sign Mark.</p>

<p>ul li:after{opacity: 1;content: '\2713';right: 20px;position: absolute;font-size: 20px;font-weight: bold;}</p>


<p>How to <strong><em>draw</em></strong> the tick symbol using CSS? The symbols I find using <a href="https://en.wikipedia.org/wiki/Check_mark#Unicode" rel="noreferrer">Unicode</a> isn't aesthetically-pleasing.</p>

<p><strong>EDIT</strong>
Icon fonts are a great suggestion. I was looking for something like <a href="http://fortawesome.github.io/Font-Awesome/icon/check-circle/" rel="noreferrer">this</a>.</p>


How to draw a checkmark / tick using CSS?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

如何使用绘制的勾号符号？我发现使用的符号在美观上不讨人喜欢。编辑图标字体是一个很好的建议。我在找像这样的东西。

问如何使用CSS绘制检查点/勾号？
EN

回答 18

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用CSS绘制检查点/勾号？EN

回答 18

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用CSS绘制检查点/勾号？
EN