TP Notes: CSS ::before and ::after

css 的 ::before 和 ::after 是我比較少接觸的 css 語法, 可以在元素前後加上一個不存在網頁元素中的物件，範例如下:

```
$mmcode(r1)
  
```

<div class="mmresult r1">
<style>
.txt
{
  color:#0000ff;
}
.txt::before
{
  content:"[" attr(btxt) "]";
/*
  content 一定要給值，語法有
  attr(屬性)
  url(網址) 可以秀圖片
*/
  color:#ff0000;
}
.txt::after
{
  content:"[" attr(atxt) "]";
  color:#00ff00;
}
</style>

<span class="txt" btxt="Before" atxt="After">我是文字</span><br>
</div>
  
content 雖然可以用 url 秀圖片，但是無法調整圖片大小，如果要設定圖片大小，可以利用 background-image 來實現
  
```
$mmcode(r1_1)
```
<div class="mmresult r1_1">
<style>
.txt1
{
  color:#0000ff;
  position:relative;
}
.txt1::before
{
  content:"　　[" attr(btxt) "]" ;
  color:#ff0000;
  display:inline-block;
  background-image: url("https://yiharng.github.io/bomb.png");
  background-repeat: no-repeat;
  background-size: 1.5em;
  height:2em;
}
.txt1::after
{
  content:"[" attr(atxt) "]";
  color:#00ff00;
}
</style>

<span class="txt1" btxt="Before" atxt="After">我是文字</span>
</div>
  
  
CSS 的選擇器語法除了用 .class 還可以用 [] 來指定特定的attr , 如果搭配 hover 可以做到滑鼠移過去顯示說明的效果, 這個效果以前都是用 javascript 製作，其實 CSS 就可以做到了 !

```
  
$mmcode(r2)

```

<div class="mmresult r2">
<style>
span[stxt]:hover
{
  position:relative;
  color:#ff00ff;
  cursor:help;
}
span[stxt]:hover::after,
span[stxt]:focus::after
{
  position:absolute;
  background-color:#ffffcc;
  color:#0000ff;
  padding:0.5em;
  border:1px solid #000000;
  width:6em;
  text-align:center;
  left:0;
  top:1.2em;
}
span[stxt=ok1]:hover::after,
span[stxt=ok1]:focus::after
{
  content:"我是說明1";
}
span[stxt=ok2]:hover::after,
span[stxt=ok2]:focus::after
{
  content:"我是說明2";
}
</style>
  
<span stxt="ok1">我是文字1</span>
<span stxt="ok2">我是文字2</span>
</div>

<br>

::before 和 ::after 有個特別的功能是 counter , 
我個人覺得這個其實就是 `<ul> <ol> <li>` 的原型

特別的是，自己寫有更靈活的設定，例如可以設定數字間隔，或多個計數器

範例如下 :

```
$mmcode(r3)
```

<style>

.nn,.f0
{
  counter-reset:var1 var2 2;
/*
  counter-reset:變數1 起始值 變數2 起始值
  沒有設定起始值就是 0
*/
}
.f1::before
{
  counter-increment: var1;
  content: counter(var1) ". ";
}
.f2::before
{
  counter-increment: var2 2;
  content: counter(var2,cjk-ideographic) ". ";
  color:#ff0000;
/*
  counter 語法 : counter(變數,list-style-type)
*/
}
.nn div{
  margin-left:1em;
}
</style>

<div class="nn">
開始
<div class="f0">
  <div class="f1">一樓</div>
  <div class="f1">一樓
    <div class="f0">
      <div class="f1">二樓</div>
      <div class="f1">二樓
        <div class="f0">
          <div class="f1">三樓</div>
          <div class="f1">三樓
            <div class="f2">F2</div>
            <div class="f2">F2</div>
            <div class="f2">F2</div>
          </div>
          <div class="f1">三樓</div>
        </div>
      </div>
      <div class="f1">二樓</div>
    </div>
  </div>
  <div class="f1">一樓</div>
</div>
結束
</div>
</div>
  
list-style-type 的值如下:
  
disc
, circle
, square
, armenian
, cjk-ideographic
, decimal
, decimal-leading-zero
, georgian
, hebrew
, hiragana
, hiragana-iroha
, katakana
, katakana-iroha
, lower-alpha
, lower-greek
, lower-latin
, lower-roman
, upper-alpha
, upper-greek
, upper-latin
, upper-roman
, none
, inherit
  
除了 counter ，還有一個 counters 可以處理階層問題
  
```
$mmcode(r4)  
```
  
<div class="mmresult r4">

<style>

.snn .sf0
{
  counter-reset:var1;
}
.snn .sf1::before
{
  counter-increment: var1;
  content: counters(var1,"-") ". ";
/*
  counters 語法 : counters(變數,連結字串,list-style-type)
*/
}
.snn div{
  margin-left:1em;
}
</style>

這個功能的實用範例，是直接搭配 h1 和 h2 來實做章節

```
$mmcode(r5)  
```

.hnn
{
  counter-reset: var1;
}
.hnn h1
{
  counter-reset: var2;
}
.hnn h1::before
{
  counter-increment: var1;
  content: "第" counter(var1) "章 " ;
}
.hnn h2::before
{
  counter-increment: var2;
  content: "第" counter(var1) "-" counter(var2) "節 ";
}
.hnn h2
{
  margin-left:1em;
}
.hnn span
{
  margin-left:3em;
}
</style>

<div class="hnn">
<h1>開始</h1>
  <h2>出發</h2>
    <span>一個旅程的開始
    </span>
  <h2>繼續</h2>
<h1>回程</h1>
  <h2>加油</h2>
  <h2>到家</h2>
</div>
</div>
  
<script>
  (function()
   {
    $(".hnn h2").css("margin-left","0em");
  })();
</script>

<br>
  
# 取值和修改
  
javascript 有一個超強的指令，可以取得該元素所有的設定
  
window.getComputedStyle('元素', '::before 或 ::after')
  
```
$mmcode(r6)  
```

<style>

.r6css1::before
{
  content: "[" attr(btxt) "]";
  color:#0000ff;
}
</style>
  
<div class="r6css1" btxt="我是Before">
  我是文字
</div>
<br>
<div class="r6css2">
</div>

(function()
{
  let dd=document.querySelector(".r6css1");
  let dd1=window.getComputedStyle(dd,"::before");
  $(".r6css2").html(
     "color:"+dd1.color+"<br>"
    +"content:"+dd1.content
  );
})()

</script>
</div>

::before 和 ::after 並不允許直接修改內容，最簡單的方法，是用新的 CSS 取代舊的

範例 :
  
```
$mmcode(r7)  
```

(function()
{
  let cc = document.getElementById('r7css_new').sheet;
  cc.insertRule(".r7css1::before{color:#0000ff;}", 0);

$("#r7b1").on("click",()=>
  {
    let cc = document.getElementById('r7css_new').sheet;
    cc.deleteRule(0);
    // 語法 deleteRule(索引)  
    cc.insertRule(".r7css1::before{color:#ff0000;}", 0);  
    // 語法 insertRule("css", 索引); 索引可省略
  });
  $("#r7b2").on("click",()=>
  {
    let cc = document.getElementById('r7css_new').sheet;
    cc.deleteRule(0);
    cc.insertRule(".r7css1::before{color:#00ff00;}", 0);  
  });
})()

</script>
</div>
  
<br>
<br>

TP Notes

2020年5月29日星期五

CSS ::before and ::after

沒有留言:

張貼留言

2020年5月29日 星期五

CSS ::before and ::after

沒有留言:

張貼留言

2020年5月29日星期五