罫線の周りにCSSで

Question

私はtype="square"です簡単な<ul><li>のリストを持っています。私がしようとしているのは、この正方形を白くすることです。

私のページの背景色が白で四角形が見えないからです。

私はそれが簡単なことだと思っていますが、それを理解することはできません。ここでは、正方形が表示されていない見ることができるように私はこれまで

ul li { 
 
    color: white; 
 
} 
 
li::before { 
 
    border: 1px solid black; 
 
} 
 
ul li span { 
 
    color: black; 
 
}

<ul type="square"> 
 
    <li> 
 
     <span>Item 1</span> 
 
    </li> 
 
    <li> 
 
     <span>Item 2</span> 
 
    </li> 
 
</ul>

を試してみたものです。

Answer 1

代わりのlist-style-type擬要素を使用すると同じではない色などの変更この

ul li { 
    color: black; 
} 

またはあなたが必要なものを任意の色を持つと、この

ul li { 
    color: white; 
} 

、リのために四角形のように見せて境界線を追加するスタイル

ul{ 
 
    list-style-type:none; 
 
} 
 

 
ul li { 
 
    // color: white; 
 
    position:relative ; 
 
} 
 
ul li::before { 
 
     content: ''; 
 
    width: 10px; 
 
    height: 10px; 
 
    background: white; 
 
    position: absolute; 
 
    left: -20px; 
 
    border: 1px solid #F00; 
 
    top: 3px; 
 
} 
 
ul li span { 
 
    color: black; 
 
}

<ul> 
 
    <li> 
 
     <span>Item 1</span> 
 
    </li> 
 
    <li> 
 
     <span>Item 2</span> 
 
    </li> 
 
</ul>

Answer 2

限り背景

Answer 3

既存のリスト項目の箇条書きをターゲットにすることはできませんが、before要素を変更して、必要なスタイルで新しいカスタム箇条書きを作成できます。

残念ながら、箇条書きの位置を知る方法はわからないので、「左」のプロパティを使用して見栄えの良い位置を選択するだけです。

ul li { 
 
    color: white; 
 
} 
 
li::before { 
 
    content: ""; 
 
    display: inline-block; 
 
    position: relative; 
 
    left: -18px; 
 
    width: 5px; 
 
    height: 5px; 
 
    background: white; 
 
    border: 1px solid black; 
 
    vertical-align: middle; 
 
} 
 
ul li span { 
 
    color: black; 
 
}

<ul type="square"> 
 
    <li> 
 
     <span>Item 1</span> 
 
    </li> 
 
    <li> 
 
     <span>Item 2</span> 
 
    </li> 
 
</ul>

Answer 4

あなたは::before pseudoelementのcontentプロパティにUnicodeの記号を使用することができます。必要なシンボルを見つけてそのコードをHEXに変換するには、UTF-8 Geometric Shapesを参照してください。あなたは色使用しているため

li { 
 
    list-style-type: none; 
 
    } 
 
    li::before { 
 
    content: "\20e3"; 
 
    margin: 0 1em 0 0; 
 
    }

<ul> 
 
    <li>Item 1</li> 
 
    <li>Item 2</li> 
 
</ul>