web-dev-qa-db-ja.com

疑似要素が表示されない

疑似要素がdivに表示されない。 Sprite画像を使用していますが、Sprite以外の画像も試しましたが、何もしていません。絶対配置、Zインデックス、マージンなどを使用して、複数の方法を試しました。間違えていなかったり、明らかに問題がある場合は、正しく実行しているようです。私はコミュニティに不慣れで、ここでもGoogleでも検索しましたが、なぜそれが表示されないのかについての結果はありません。コードは以下の最も基本的な試みです。手伝ってくれてありがとう。

.test {
    display:inline-block;
    background:#fff;
    width:60%;
}

.test:before,
.test:after {
     background:url("/imgs/Sprite2.png") repeat-y;
}

.test:before,
.test:after {
    position:relative;
    display:inline-block;
    vertical-align:top;
    width:27px;
    height:100%;
}

.test:before {
    content:"";
    background-position:0 0;
}

.test:after {
    content:"";
    background-position:-55px 0;
}

私は今それを働いています。コードは以下のとおりです。私はすでにこれを試したことを誓うことができましたが、私が最初にそれをしたときに何か間違ったことをしたに違いありません。

 .test {
     background:#fff;
     width:60%;margin:0  0 60px 5%;
 }

 .test:before,
 .test:after {
     content:"";
     background:url("/imgs/Sprite2.png") repeat-y;
     position:absolute;
     top:0;
     width:27px;
     height:100%;
 }

 .test:before {
     right:100%;
     background-position:0 0;
 }

 .test:after {
     left:100%;
     background-position:-55px 0;
 }
csspseudo-element
11
Tony

これが正解です。ボタンを使って答えたことを一度も見せたことがありません。回答済みと見なされると考えて、上に配置しました。基本的に私はどこかで初めて何か間違ったことをしたに違いありません。これが地雷と同様の問題を抱えている人々を助けることを願っています。

.test {
    background: #fff;
    width: 60%;
    margin: 0 0 60px 5%
}

.test:before, .test:after {
    content: "";
    background: url("/imgs/Sprite2.png") repeat-y;
    position: absolute;
    top: 0;
    width: 27px;
    height: 100%
}

.test:before {
    right: 100%;
    background-position: 0 0
}

.test:after {
    left: 100%;
    background-position: -55px 0
}
2
Tony

編集：

これは、height:100%;で言及されている.test:before,.test:afterの問題です。

height:100%から.testに言及する必要があります。htmlとbodyについても、

CSSの推奨される変更を以下に示します。

これを試してください：

body, html { height: 100%; }

.test{ 
    display:inline-block; 
    background:#fff; 
    width:60%;
    height: 100%; /*added height*/
}

.test:before,
.test:after{
    content:"";
    background:url("/imgs/Sprite2.png") repeat-y;
    position:relative;
    display:inline-block;
    vertical-align:top;
    width:27px;
    height:100%;   
}

.test:before{ background-position:0 0 }
.test:after{ background-position:-55px 0 }

作業デモ

9
Ahsan Khurshid

問題はあなたのCSSプロパティが適切に宣言/配置されていなかったようです。私が見たものから、あなたは最初にあなたのbackground-imageを宣言しましたが、contentはbackground-positionで最後に宣言されました。

そして、私はグリコーコンフォントに自分の問題がありました。これは、Keaukraineがdisplayプロパティの宣言について述べたことを実装するまでは表示されませんでした。

しかし、contentプロパティを宣言することを忘れがちになり、期待される結果が消えることがあります。

したがって、次のように配置する必要があります。

element:before {
  content: "\e013"; // or content: ""
  background:url("background_image.png");
  background-position: 0 0;
  display: inline-block;
}
0
Randy