คำสั่ง :before และ :after ซึ่งไม่รู้เรียกมันว่าอะไรจริงๆแล้วมันคือ CSS Pseudo-elements

จริงๆแล้วหลักการ ของ Before และ After มันแค่จะไปเติม ที่ด้านหน้าและด้านหลัง ของ Class ที่เรา Select ใน css เท่านั้น

อะไรที่เป็นลิงก์จะมีคำว่า Read this: นำหน้าเสมอ

a::before {
content: "Read this: ";
}

content จะทำงานเมื่อใช้คู่กับ :before หรือ :after เสมอ ถ้าใช้เดี่ยวๆ จะไม่ทำงาน

เมื่อเราใช้ tag <a> สร้างลิ้ง ลิ้งของเราจะมีวงเล็บปีกกาเปิด และ ปิดมาให้เราด้วย โดยที่เราไม่ต้องใส่ใน HTML เอง
ที่น่าจะได้ใช้บ่อยๆ คือ การใส่ double quote หรือ “”  ให้กับข้อความอ้างอิงต่างๆ ในบทความ อัตโนมัติ เพราะปกติเรามักใส่ <blockquote></blockquote> ครอบบทความกันอยู่แล้ว

a:before { content : '{';}
a:after { content : '}';}

ใส่อะไรให้กับ CONTENT ได้บ้าง

1.ใส่ string หรือ การใส่ข้อความต่างๆ
2.ใส่ URI หรือ ใส่ url(…) เข้าไป ไว้แทรก icons หรือรูปภาพ
3.ใส่ attribute ของ กล่องที่เราสั่ง เช่น
a:after {content: ' ( ' attr(href) ' )';}
เมื่อสร้างลิ้ง <a href="https://vir9.com">vir9</a>
มันจะแสดงผลโดยการดึงค่าใน href มาใส่ โดยจะแสดงผลตามด้านล่างนี้
vir9 (https://vir9.com)

การใส่ Quote ข้อความ สามารถสั่งเป็นข้อความ แทนการใส่สัญลักษณ์ได้เลย

p:before { content : open-quote;}
จะเพิ่ม ” เข้าไปข้างหน้าสำหรับ quote ชั้นนอกสุด

p: after { content : close-quote; }
จะเพิ่ม ” เข้าไปข้างหลังสำหรับ quote ชั้นนอกสุด

ตามหลักควรใช้ open-quote และ close-quote คู่กันเสมอ

http://nicha.in.th/2012/09/css-content-property/
http://www.westciv.com/style_master/academy/css_tutorial/advanced/generated_content.html#counter
https://www.w3schools.com/css/css_counters.asp
https://www.w3schools.com/css/tryit.asp?filename=trycss_counters2
https://www.w3schools.com/css/tryit.asp?filename=trycss_counters3
https://www.thaicss.com/css3-pseudo-elements/

1. <string> กำหนด Text ที่เราต้องการแสดง
2. <uri> เรียกรูปหรือไฟล์ที่เราต้องการให้แสดงผลออกมาโดยอัตโนมัติ
3. <counter> แสดงจำนวนที่เรานับโดยการระบุชื่อเนื้อหาให้ตรงกับที่เราตั้งค่าไว้จาก counter-reset* และเราสามารถกำหนดสไตล์แบบ List-Style ได้ด้วย
4. open-quote and close-quote เปิดและปิดเครื่องหมายคำพูดในกรณีที่เราต้องการใช้งานในลักษณะของ Quote
5. no-open-quote and no-close-quote สั่งยังไม่ให้ปิด Quote แต่ให้จำค่าไว้และอ้างอิงการปิดหรือเปิด Quote ก่อนหน้านี้
6. attr(X) ดึงเนื้อหาจาก Attribute ที่เรากำหนดมาแสดงผลโดยอัตโนมัติ

css สามารถประกาศตัวแปรแล้วทำการนับเพิ่มจำนวนได้ มีประโยชน์เวลานำไปประยุกต์ใช้กับ pagination

    <style>
        section.pagination {counter-reset: pages;}
        section.pagination a {counter-increment: pages;}
        section.pagination a::before {content: counter(pages); }
    </style>

    <section class="pagination">
        <h2>Jump to page:</h2>
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
    </section>

css counter
counter-reset ประกาศใน element ที่เป็นจุดเริ่มต้นนับ ผมเริ่มนับเมื่อเจอ section.pagination

counter-increment ประกาศใน element ที่เราจะเพิ่มตัวนับ

counter(pages) ไว้แสดงผลตัวนับ ตรงนี้ใช้คู่กับ pseudo ::before เพื่อแสดงผลบน element a

pages เปรียบเสมือนตัวแปรที่ประกาศไว้ใช้อ้างอิงกับทุก counter