HTML・CSS

注意事項の※がついたリストのコードメモ

いつも書くのがめんどくさいのと、beforeだからって「display: block;」や「top: 0;」など、余計なコードを書かなくていいようにコピペ用にメモしておく。

※がついたリスト
<ul class="list_precaution">
<li>注意事項が入ります。</li>
<li>注意事項が入りますテキストテキスト</li>
<li>テキストテキスト長い文章だとこうなりますテキストテキスト長い文章だとこうなりますテキストテキスト長い文章だとこうなります</li>
</ul>
.list{
  &_precaution{
    li{
      font-size: 1.3rem;
      padding-left: 1.2em;
      position: relative;
      &::before{
        content: '※';
        font-size: .9em;
        left: 0;
        position: absolute;
      }//&::before
    }//li
  }//&_precaution
}//.list
ABOUT US
yukipan
Web制作会社で働いてます。パンダとかリラックマとか、まあるいものが好き。好奇心旺盛で、何にでも興味をもってしまう。とりあえずやってみてから取捨選択するのがモットー。今はグリーンカレーとチャイと株式投資がブーム。