web-dev-qa-db-ja.com

疑似クラス:: before-CSSサークルの作成

私はCSSで円を作成しようとしていますが、疑似クラス:: beforeを使用したくない

これは次のようになります（地下鉄駅のリストの場合）：

.subway-item{
 // css for text item going after circle
 }
.subway-item::before{
   width:15px;
   border-radius: 15px;
   -moz-border-radius: 15px;
   -webkit-border-radius: 15px;
   background-color:#69b6d5;
}

テキストの前に追加の要素を使用するか、画像を使用して実行できることを知っています。しかし、知りたいのは:: beforeでそのようなプロパティを使用することが可能であることです

htmlcsspseudo-class
22
alvery

また、content、height、およびdisplayを設定して、実際に擬似要素をレンダリングする必要があります。

例：

.subway-item::before{
   content: '';
   display: inline-block;
   width: 15px;
   height: 15px;
   -moz-border-radius: 7.5px;
   -webkit-border-radius: 7.5px;
   border-radius: 7.5px;
   background-color: #69b6d5;
}

注：ベンダー固有のプロパティを記述する方がよいbefore標準プロパティ（border-radiusあなたの場合）。

49
aaronk6