擬似要素::afterおよび::before
9447 ワード
CSS擬似要素:afterは選択した要素の仮想最後のサブ要素を一致させるために使用される.通常はcontent属性に合わせてその要素に装飾内容を追加する.この仮想要素はデフォルトでは行内要素です.
::after CSS 3 ,:: . CSS3 CSS2 :after.
：
copy ；
：
::after{content:"..."} content ；
::after{content:attr(data-descr)} ；
::after{content:url("...logo.png");} ；
::after{content: counter(li);} ： – ， ;
::after{content: "";} – ， ( ， background-size。)， ;
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css::before and css::aftertitle>
<style>
.exciting-text::after {
content: ";
color: green;
}
.boring-text::after {
content: ";
color: red;
}
.ribbon {
background-color: #5BC8F7;
}
.ribbon::after {
content: " ";
background-color: #FFBA10;
border-color: black;
border-style: dotted;
}
span[data-descr] {
position: relative;
text-decoration: underline;
color: #00F;
cursor: help;
}
span[data-descr]:hover::after {
content: attr(data-descr);
position: absolute;
left: 0;
top: 24px;
min-width: 200px;
border: 1px #aaaaaa solid;
border-radius: 10px;
background-color: #ffffcc;
padding: 12px;
color: #000000;
font-size: 14px;
z-index: 1;
}
style>
head>
<body>
<p class="boring-text"> p>
<p> p>
<p class="exciting-text"> MDN 。
！p>
<br>
<br>
<br>
<br>
<span class="ribbon"> 。span>
<br>
<br>
<br>
<br>
<p> <br />
<span data-descr="collection of words and punctuation"> span>
<span data-descr="small popups which also hide again"> span>。<br />
<span data-descr="not to be taken literally"> span>.
p>
body>
html>