読者です 読者をやめる 読者になる 読者になる

はるらぼ

jQuery、Perl、Linux、デザイン、UI関連の備忘録です。※引用する場合は自己責任で。

疑似要素を使った文頭記号

よく使うのでメモ。

  • りんご
  • なし
  • もも

li:before {
  border-top: 1px solid #777;
  border-right: 1px solid #777;
  content:"";
  height:5px;
  width:5px;
  transform:rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  display:inline-block;
  margin-right:10px;
  margin-bottom:0;
}

  • りんご
  • なし
  • もも

li:before {
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-top: 4px solid #777;
  content: "";
  display: inline-block;
  transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  margin: 0 2px 2px 5px;
}