web-dev-qa-db-ja.com

CSSContentプロパティ内にHTMLタグを追加します

:afterと:before内にCSSコンテンツプロパティのHTMLタグを追加する方法を探しています。

この質問 とは異なり、<のような記号の追加についてのみ説明します。私が追加しようとしているのは次のようなものです：

.breadcrumbs li a:before {
    content: '<i class="icon"></i>';
}

それを行うための可能な方法はありますか？

csscss-content
12
Muhammad Reda

不可能だよ。 CSSからマークアップを生成することはできません。

また、不要なはずです。背景画像/アイコンフォント/生成された疑似要素に既にあるものは何でも貼り付けてください。

8
Quentin

これはおそらくあなたが望むものです、

パンくずリストのliリンクの左側に画像を配置するには：

.breadcrumbs li a::before {
    content: "";
    display: block;
    background: url('/img/breadcrumb-icon.png') no-repeat;
    width: 20px;
    height: 20px;
    float: left; /*icon on the left*/
    margin: 0 6px 0 0; /*margin on the right so there is a gap between your icon and link*/
}

反対側でそれが必要な場合は、float:right;margin: 0 0 0 6px;を試すか、::afterを使用してください。

1
ono2012