cssでカスタムハイライトを作成するにはどうすればよいですか？

^それを使用していますか？（複数行ではできませんでした）

.home-about h3:after{ 
margin-top:-15px; 
content: " "; 
background:#d7edf4; 
z-index: 0; 
}

出典

2017-04-25 user7214732

あなたは、両方のH3に位置プロパティを使用してできます – Ibu

後に ':: after'擬似要素は、2つのコロンを持っています。 1つのコロンは古い構文であり、もう使用すべきではありません。 https://developer.mozilla.org/en-US/docs/Web/CSS/::after – Rob

はい、疑似要素を使用できます。ここでは、絶対的にh3に負のz-インデックスを持つ方法があります。

h3 { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
h3:after { 
 
    content: " "; 
 
    background: #d7edf4; 
 
    z-index: -1; 
 
    display: block; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    height: .4em; 
 
}

<h3>text</h3>

出典

2017-04-25 23:44:43

':: after'疑似要素には2つのコロンがあります。 1つのコロンは古い構文であり、もう使用すべきではありません。 https://developer.mozilla.org/en-US/docs/Web/CSS/::after – Rob

@Robええ私は知っているが、IEの古いバージョンは ':: after'を認識せず、'：後で、しかし、新しいブラウザのすべてが両方をサポートします。現代のブラウザが '：after'をサポートしなくなるまで、私はむしろ私のベースをカバーし、ブラウザの準拠のために'：after'を使います。 https://msdn.microsoft.com/library/cc304078(v=vs.85).aspx –

このようにしましょう。 MicrosoftのInternet Explorerバージョン8以前をサポートする必要がある**場合は、 '：after'を使用してください。他の理由はありません。それ以外の場合は、Microsoft Internet Explorer 8以前のバージョンを終了してください。 – Rob

これを試してみる：

以下

::selection { 
    background: #ffb7b7; /* WebKit/Blink Browsers */ 
} 
::-moz-selection { 
    background: #ffb7b7; /* Gecko Browsers */ 
}

は、アクションのコードです：

.Pink::selection {background: #ffb7b7; /* WebKit/Blink Browsers */} 
 
.Pink::-moz-selection {background: #ffb7b7; /* Gecko Browsers */} 
 

 
.DarkRed::selection {background: #ff0000; /* WebKit/Blink Browsers */} 
 
.DarkRed::-moz-selection {background: #ff0000; /* Gecko Browsers */}

<p class="Pink">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tristique quam in ex posuere, eu commodo velit sodales. Vestibulum at volutpat lorem, quis interdum diam. Phasellus metus sem, lobortis eu neque eget, tincidunt hendrerit purus. Sed mollis orci dapibus lectus blandit, eget fringilla sapien ullamcorper. Aenean accumsan justo sit amet sapien finibus tincidunt. Nam vitae purus ligula. Nunc quis neque id enim ultricies euismod at id metus. In hac habitasse platea dictumst. Sed suscipit, augue id tempus blandit, orci sem faucibus turpis, ac volutpat sem enim eleifend dui. Maecenas congue augue at lacus viverra rhoncus. </p> 
 

 
<p class="DarkRed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tristique quam in ex posuere, eu commodo velit sodales. Vestibulum at volutpat lorem, quis interdum diam. Phasellus metus sem, lobortis eu neque eget, tincidunt hendrerit purus. Sed mollis orci dapibus lectus blandit, eget fringilla sapien ullamcorper. Aenean accumsan justo sit amet sapien finibus tincidunt. Nam vitae purus ligula. Nunc quis neque id enim ultricies euismod at id metus. In hac habitasse platea dictumst. Sed suscipit, augue id tempus blandit, orci sem faucibus turpis, ac volutpat sem enim eleifend dui. Maecenas congue augue at lacus viverra rhoncus. </p>

あなたの行き先を教えてください。

乾杯

出典

2017-04-26 00:37:04 Syfer

cssでカスタムハイライトを作成するにはどうすればよいですか？

答えて

関連する問題